纯 React 优化 1.0 (未完)

  1. react diff 算法将不会尝试匹配不同组件类的子树。如果发现正在使用的两个组件类输出的 DOM 结构非常相似,你可以把这两个组件类改成一个组件类

  2. 如果没有提供稳定的 key(例如通过 Math.random() 生成),所有子树将会在每次数据更新中重新渲染。

  3. 引入 immutablepureRender 后,render 里的 JSX 注意一定不要有同样的 key(如两个列表,有重复的数据,此时以数据 id 来作为 key 就不太合适,应该要用数据 id + 列表类型作为 key ),会造成不渲染新数据情况。列表页目前的处理办法是将 key 值换成 id + listType

  4. 使用 shouldComponentUpdate 对于变化的 props 以及 state 判断,是否需要重新 render

  5. 对于组件接收数据尽量扁平化,便于优化 diff 比较。

  6. 将方法的 bind 一律置于 constructor ,每次 renderbind ,会消耗性能。

  7. 慎用 setState,因其容易导致重新渲染,shouldComponentUpdate 也需要比较 state

  8. 只传递 component 需要的 props

  9. 组件拆分更细,便于 diff 以及重新 render 成本更小。

  10. 对于 shouldComponentUpdate :(结果影响是否需要 diff )加速 shouldComponentUpdate 的检查,简化 shouldComponentUpdate 的检查,React 官方提供了[Performance Tools],对渲染性能监控
    import Perf from 'react-addons-perf';
    Perf.start();
    ....your react code;
    Perf.stop();
    调用 Perf.printWasted(); 查看组件上进行了无意义的(没有引起真实 DOM 的改变)虚拟 DOM 比较。
    Perf.printInclusive() 的结果则给出渲染各个组件的总体时间

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,104评论 2 35
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,301评论 0 2
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,478评论 1 10
  • 在旅途⋯ 美好都在路上
    所谓荼靡阅读 215评论 0 4