React创建组件的三种方法

无状态函数式组件

创建纯展示组件，只负责根据传入的props来展示，不涉及到要state状态的操作，是一个只带有一个render方法的组件类

创建形式如下：

function HelloComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="yourName" />, mountNode) 

特点：

• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

无状态组件使得代码结构更加清晰，减少代码冗余，在开发过程中，尽量使用无状态组件

React.createClass

是ES5的原生的JavaScript来实现的React组件
该例子实现了一个交互列表，用户输入信息，按回车后触发键盘事件将获取到的输入值渲染生成列表项，输入信息的数量可以是任意多个

具体形式如下：

var Greeting = React.createClass({
    getInitialState: function () {
        return {
            work_list: []
        };
    },
    render: function () {
        return (
            <div>
                <input type="text" ref="myWork" placeholder="What need to be done?" onKeyUp={this.Enter}/>

                <ul>
                    {
                        this.state.work_list.map(function (textValue) {
                            return <li key={textValue}>{textValue}</li>;
                        })
                    }
                </ul>

            </div>
        );
    },
    Enter: function (event) {
        var works = this.state.work_list;
        var work = this.refs.myWork.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({work_list: works});
            this.refs.myWork.value = "";
        }


    }
});

给文本框增加onKeyUp监听键盘事件

组件在插入页面前其实是在虚拟 DOM 中的表示，因此，在渲染成最终实际的 DOM 前，不能通过直接访问组件内的元素来试图获取它的属性。文本输入框用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，我们在文本输入框添加了一个ref属性 myWork，然后通过this.refs.myWork就指向这个虚拟 DOM 的子节点，这样就可以通过this.refs.myWork.value获取到它的值

特点：

• React.createClass会自绑定函数方法导致不必要的性能开销
• React.createClass的mixins不够自然、直观

---

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class Greeting extends React.Component{
   constructor (props) {
       super(props);
       this.state={
            work_list: []
        }

        this.Enter=this.Enter.bind(this); //绑定this
    }
    render() {
        return (
            <div>
                <input type="text" ref="myWork" placeholder="What need to be done?" onKeyUp={this.Enter}/>

                <ul>
                    {
                        this.state.work_list.map(function (textValue) {
                            return <li key={textValue}>{textValue}</li>;
                        })
                    }
                </ul>

            </div>
        );
    }
    Enter(event) {
        var works = this.state.work_list;
        var work = this.refs.myWork.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({work_list: works});
            this.refs.myWork.value = "";
        }


    }
}

关于this

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置

React.Component创建的组件，其成员函数不会自动绑定this，需要手动绑定，否则this不能获取当前组件实例对象

React.Component三种手动绑定this的方法

1. 在构造函数中绑定

 constructor(props) {
       super(props);
       this.Enter = this.Enter.bind(this);
  }

1. 使用bind绑定

    <div onKeyUp={this.Enter.bind(this)}></div> 

1. 使用arrow function绑定

    <div onKeyUp={(event)=>this.Enter(event)}></div> 

我们在实际应用中应该选择哪种方法来创建组件呢？

• 只要有可能，尽量使用无状态组件创建形式
• 否则（如需要state、生命周期方法等），使用React.Component这种es6形式创建组件