react创建组件的三种方式:
1、函数式无状态组件
2、es5方式React.createClass组件
3、es6方式extends React.Component
三种创建方式的异同
1、函数式无状态组件
(1)语法
1 function myComponent(props) { 2 return 3 <div>Hello {props.name}</div> 4 }
(2)特点
● 它是为了创建纯展示组件,这种组件只负责根据传入的props
来展示,不涉及到state
状态的操作。
● 组件不能访问this对象
● 不能访问生命周期方法
(3)建议
如果可能,尽量使用无状态组件
2、es5方式React.createClass组件
(1)语法
1 var myCreate = React.createClass({ 2 defaultProps: { 3 //code 4 }, 5 getInitialState: function() { 6 return { 7 //code 8 }; 9 }, 10 render: function() { 11 return ( 12 <div> 13 //code 14 </div> 15 ); 16 } 17 });
(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> ); } };
(2)特点
● 成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。
● 状态state是在constructor中像初始化。
● props属性类型和组件默认属性作为组件类的属性,不是组件实例的属性,所以使用类的静态属性配置。