React 中的 ComponentPureComponent无状态组件 之间的比较

Posted 2020-12-30 cag2050

• React 中的 Component、PureComponent、无状态组件之间的比较

组件类型	说明
React.createClass	不使用ES6语法，只能使用 React.createClass 来创建组件；React对属性中的所有函数都进行了this绑定
Component	使用ES6语法创建组件；React并没有对内部的函数，进行this绑定
PureComponent	shouldComponentUpdate通过判断props和state是否发生变化来决定需不需要重新渲染组件，当然有时候这种简单的判断，显得有些多余和样板化，于是React就提供了PureComponent来自动帮我们做这件事，这样就不需要手动来写shouldComponentUpdate了。注意：PureComponent 自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较；最简单避免上述情况的方式，就是避免使用可变对象作为props和state，取而代之的是每次返回一个全新的对象；也可以考虑使用Immutable.js来创建不可变对象，通过它来简化对象比较，提高性能。
无状态组件	无state，只有props。

• 参考文章：https://segmentfault.com/a/1190000008402834