react创建组件的三种方式

Posted hutaoblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react创建组件的三种方式相关的知识,希望对你有一定的参考价值。

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

 

以上是关于react创建组件的三种方式的主要内容,如果未能解决你的问题,请参考以下文章

React Native创建组件的三种方式

React创建组件的3种写法

react组件构建的三种方式

03react 之创建component

react 组件通讯的三种方式

React之向路由组件传递参数的三种方式