JS每日一题：react中类组件和函数式组件中有什么不同?

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点推送当天的参考答案注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路点击加入答题