创建组件的三种方法
文章目录

React: 创建组件的三种方法

无状态函数式组件

1
2
3
4
5
6
function HelloComponent(props) {
return <div > Hello {
props.name
} < /div>
}
ReactDOM.render( < HelloComponent name = "yourName" / > , mountNode)

特性

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

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

React.createClass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Greeting = React.createClass({
getInitialState: function () {
...
},
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(){...})
}
</ul>

</div>
);
},
Enter: function (event) {
...
}
});

特点

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

React. Component

这个就是最近最常用的方法了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Greeting extends React.Component{
constructor (props) {
super(props);
this.state={
work_list: []
}

this.Enter=this.Enter.bind(this); //绑定this
}
render() {
return (
...
);
}

Enter(event) {
var works = this.state.work_list;
this.setState({work_list: works});
}
}

特点

  • 基本上教程都是根据这个方法来使用的
  • 成员函数不会自动绑定 this , 一般需要通过 bind() 进行绑定

成员函数 this 的绑定方法

  1. 在构造函数中绑定
1
2
3
4
constructor(props) {
super(props);
this.Enter = this.Enter.bind(this);
}
  1. 使用bind绑定
1
<div onKeyUp={this.Enter.bind(this)}></div>
  1. 使用arrow function绑定
1
<div onKeyUp={(event)=>this.Enter(event)}></div>

总结

只要有可能,尽量使用无状态组件创建形式

否则(如需要state、生命周期方法等),使用React. Component这种es6形式创建组件