共计 1173 个字符，预计需要花费 3 分钟才能阅读完成。
20190306 期
react 中类组件和函数式组件中有什么不同?
在 react 中创建组件的形式有三种
纯函数式定义的无状态组件
React.createClass 定义的组件
Extends React.Component 定义的组件
今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同, 分别在什么场景下适合使用
首先我们来看一下用上述方法如何来创建一个组件
Extends React.Component 定义的组件
React.Component 是以 ES6 的形式来创建 react 的组件的，是 React 目前极为推荐的创建有状态组件的方式，最终会取代 React.createClass 形式
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.initialValue || ‘placeholder’
};
// 手动绑定 this
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
text: event.target.value
});
}
render() {
return (
<div>
<input value={this.state.text} onChange={this.handleChange}/>
</div>
);
}
}
Demo.propTypes = {
initialValue: React.PropTypes.string
}
纯函数式定义的无状态组件
纯函数组件的特点:
组件不会被实例化, 整体渲染性能得到提升
组件不能访问 this 对象
组件无法访问生命周期的方法
无状态组件只能访问输入的 props, 无副作用
function DemoComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<DemoComponent name=”JS 每日一题 ” />, mountNode)
使用场景
以类形式创建的组件不用多说，该怎么用还怎么用, 这里说一纯函数组件, 纯函数组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来 React 也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件
总结
react 中有三种创建组件的形式
纯函数不会被实例化，不能访问 this，没有生命周期
尽可能的使用纯函数拆分复杂型组件
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题
