react创建组件的三种方式

2018-06-24 01:29:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Ajax相关——get请求和post请求的区别

下一篇:自己收集的工作js库---2018-02-07