无状态函数式组件
创建纯展示组件，只负责根据传入的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的方法
- 在构造函数中绑定
constructor(props) {
super(props);
this.Enter = this.Enter.bind(this);
}
- 使用bind绑定
<div onKeyUp={this.Enter.bind(this)}></div>
- 使用arrow function绑定
<div onKeyUp={(event)=>this.Enter(event)}></div>
我们在实际应用中应该选择哪种方法来创建组件呢？
- 只要有可能，尽量使用无状态组件创建形式
- 否则（如需要state、生命周期方法等），使用
React.Component这种es6形式创建组件
