React创建组件的三种方法

无状态函数式组件

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

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

特点：
1，组件不会被实例化，整体渲染性能得到提升。
2，组件不能访问this对象。
3，组件无法访问生命周期的方法。
4，无状态组件只能访问输入的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 获取到他的值

特点：
1，React.createClass 会自动绑定函数方法导致不必要的性能开销。
2，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);
  }

2，使用bind绑定

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

3，使用arrow function 绑定

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

我们在实际应用中应该选择哪种方法来创建组件呢？
1，只要有可能，尽量使用无状态组件创建形式。
2，否则（如需要state，生命周期方法等），使用React.Component 这种es6 形式创建组件