React.js 概念的几个关键点

作者: jacobbubu | 来源:发表于2015-05-24 20:11 被阅读1216次

    1. Render

    1. 一旦 Component 的 this.state 或者 this.props 的值变化,那么当前 Component 将会被重新“绘制”。记住,是“绘制”而不是重新创建,因此 this.getInitialStatethis.componentWillMountthis.componentDidMount 不会因此而被调用。
    2. 通过变更 this.state(this.setState) 引起重绘是当前 Component 引起 “重绘” 的主要手段,还有一个手段是 this.forceUpdate()。而通过为 Child Component 设定新的 props 的方式,是 Parent Component 引起 Child Component 重绘的主要方法。
    3. 判断的时机是在一个重绘周期开始的时候,即一次 requestAnimationRequest 被回调的时候(1/60 秒)。所以,如果你的所有绘制时间在 16 秒之内被完成,用户自然就能享受到如丝般柔顺的交互了。React 可能是目前最容易 Tuning UI 性能的框架了,你只要分别记录不同 Component 的 Render 执行时间就可以了。
    4. 检测 this.state 或者 this.props 的不同是通过“深度比较”来完成的,也就是说,只要整个对象树的任何一个“叶子”的值变化,就将触发“重绘”。所以你需要密切注意每一个 Component 的 state 和 props 到底绑定了多大范围的数据,避免不必要的“重绘”。
    5. 你可以通过重载 this.shouldComponentUpdate 替代 React 的深度比较算法。但是,只有当你真的理得清楚的时候才使用这种方法。PureRenderMixin 完成了类似的工作。
    6. 更好地控制重绘,依赖于如何更好地将状态的变化局部化。这就是 immutable-js 或者 mori 这样的库的作用了。每一个 Component 只绑定到大的数据容器的一个局部,其他部分的变化不会造成该 Component 绑定的 state 或者 props 的变化,因此也就避免了不必要的“重绘”。
    7. 和JS 自己的 ArrayObject 相比, immutable-js 或者 mori 并非高性能的数据结构,但是其收获的好处是状态的隔离、快速判断状态是否变化(无需深度比较),以及由此带来的最小化的“重绘”,在 React 的开发中是非常重要的。参见 性能比较

    2. Component Mount

    1. Component 在第一次被绘制前被 Mount,之前会执行 this.getInitialStatethis.componentWillMount 等一系列的类成员方法。React 的生命周期 文档写得很清楚。
    2. 但是,“重绘” 不会引发 Re-mount(你在 Parent Component 为 Child Component 设定新的 props,只会引起 Child Component 的 “重绘”,不会引起 Child Component 的 Re-mount(重新创建))。
    3. React 仅在两种情况下会 Re-mount Component。一种是通过 React.render <div /> 重新绘制了整个 Component Tree;还有一种就是 Parent Component 为 Child Component 设定了 key property,且当 key property 变化了的时候,老的 Child Component 被 Unmount 并销毁,而新的 Child Component 被重新创建、初始化和 Mount。

    在阅读过基础的 React 文档之后,将上面的要点刻在脑子里,基本上 React 对你来说就没什么坑了。如果上面的内容没有理解就开始编程,那么即使是 React 也帮不上你什么了。

    相关文章

      网友评论

      • mdemo:感谢 总结的很好,希望可以再分享一下 immutable相关的经验

      本文标题:React.js 概念的几个关键点

      本文链接:https://www.haomeiwen.com/subject/rphrqttx.html