上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component
来快速创建组件。例如下面代码所示:
import React from 'react';
const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}
这种组件,没有自身的状态,相同的props输入,必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子,所以不用继承自Component显得更简洁。
对比
createClass vs Component
对于React.createClass
和 extends React.Component
本质上都是用来创建组件,他们之间并没有绝对的好坏之分,只不过一个是ES5的语法,一个是ES6的语法支持,只不过createClass支持定义PureRenderMixin,这种写法官方已经不再推荐,而是建议使用PureComponent。
pureComponent vs Component
通过上面对PureComponent和Component的介绍,你应该已经了解了二者的区别:PureComponent
已经定义好了shouldUpdateComponent
而Component
需要显示定义。
Component vs Stateless Functional component
-
Component
包含内部state,而Stateless Functional Component
所有数据都来自props,没有内部state; -
Component
包含的一些生命周期函数,Stateless Functional Component
都没有,因为Stateless Functional component
没有shouldComponentUpdate
,所以也无法控制组件的渲染,也即是说只要是收到新的props,Stateless Functional Component
就会重新渲染。 -
Stateless Functional Component
不支持Refs
选哪个?
这里仅列出一些参考:
-
createClass, 除非你确实对ES6的语法一窍不通,不然的话就不要再使用这种方式定义组件。
-
Stateless Functional Component, 对于不需要内部状态,且用不到生命周期函数的组件,我们可以使用这种方式定义组件,比如展示性的列表组件,可以将列表项定义为Stateless Functional Component。
-
PureComponent/Component,对于拥有内部state,使用生命周期的函数的组件,我们可以使用二者之一,但是大部分情况下,我更推荐使用PureComponent,因为它提供了更好的性能,同时强制你使用不可变的对象,保持良好的编程习惯。