react创建组件的三种方式

Posted 2020-10-23 hutaoblog

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属性类型和组件默认属性作为组件类的属性，不是组件实例的属性，所以使用类的静态属性配置。