无状态函数式组件
创建纯展示组件,只负责根据传入的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 形式创建组件