码迷,mamicode.com
首页 > 其他好文 > 详细

react创建组件的三种方式

时间:2018-02-04 22:47:09      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:函数   16px   bind   init   color   对象   font   pre   var   

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创建组件的三种方式

标签:函数   16px   bind   init   color   对象   font   pre   var   

原文地址:https://www.cnblogs.com/hutaoblog/p/8414213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!