深入理解React的Virtual DOM

或许你会有这样的想法，能替换Component为PureComponent就去替换。但开发者如果错误地使用PureComponent同样会有重新渲染的问题存在，需要考虑下面三种情况：

<Table  
    // map每次都会返回一个新的数组实例，所以每次比较都是不同的  
    rows={rows.map(/* ... */)}  
    // 每一次传入的对象都是新的对象，引用是不同的。  
    style={ { color: 'red' } }  
    // 箭头函数也一样，每次都是不同的引用。  
    onUpdate={() => { /* ... */ }}  
/> 

上面的代码片段演示了三种最常见的反模式，请尽量避免它们！

正确地使用PureComponent，你可以在这里看到所有的TableRow都被“纯化”后渲染的效果。

但是，如果你迫不及待想要全部使用纯函数组件，这样是不对的。比较两组props和state不是免费的，对于大多数基本组件来说甚至都不值得：运行shallowCompare比diff算法需要更多时间。

可以使用此经验法则：纯组件适用于复杂的表单和表格，但它们通常会使按钮或图标等简单元素变慢。

现在，你已经熟悉了React的渲染模式，接下来就开始前端优化之旅吧。

关于Choerodon猪齿鱼

Choerodon猪齿鱼是一个开源企业服务平台，基于Kubernetes的容器编排和管理能力，整合DevOps工具链、微服务和移动应用框架，来帮助企业实现敏捷化的应用交付和自动化的运营管理的开源平台，同时提供IoT、支付、数据、智能洞察、企业应用市场等业务组件，致力帮助企业聚焦于业务，加速数字化转型。

大家也可以通过以下社区途径了解猪齿鱼的最新动态、产品特性，以及参与社区贡献：

•  官网：http://choerodon.io
•  论坛：http://forum.choerodon.io
•  Github：https://github.com/choerodon
•  微信公众号：Choerodon猪齿鱼
•  微博：Choerodon猪齿鱼

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!