image.png

eact创建组件的三种方式：

1、函数式无状态组件

2、es5方式React.createClass组件

3、es6方式extends React.Component

三种创建方式的异同

1、函数式无状态组件

（1）语法

 function myComponent(props) { 
 return 
 <div>Hello {props.name}</div> 
 }

（2）特点

● 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作。

● 组件不能访问this对象

● 不能访问生命周期方法

（3）建议

如果可能，尽量使用无状态组件

2、es5方式React.createClass组件

（1）语法

var myCreate = React.createClass({
 defaultProps: { 
 //code
 },
 getInitialState: function() {
 return {
 //code
 };
 },
 render: function() {
 return (
 <div>
 //code
 </div>
 );
 }
 });//欢迎加入全栈开发交流群一起学习交流：864305860

（2）特点

这种方式比较陈旧，慢慢会被淘汰。

3、es6方式extends React.Component

（1）语法

class InputControlES6 extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 state_exam: 'hello'
 };
 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange() {
 this.setState({
 state_exam: 'hello world'
 });
 }
 render() {
 return (
 <div>
 //code
 </div>
 );
 }
};//欢迎加入全栈开发交流群一起学习交流：864305860

（2）特点

● 成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

● 状态state是在constructor中像初始化。

● props属性类型和组件默认属性作为组件类的属性，不是组件实例的属性，所以使用类的静态属性配置。
结语

感谢您的观看，如有不足之处，欢迎批评指正。

获取源码

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。