代码之家  ›  专栏  ›  技术社区  ›  Praveen Rao Chavan.G

反应组分或反应纯组分

  •  3
  • Praveen Rao Chavan.G  · 技术社区  · 8 年前

    我是新来的反应,我想知道我应该什么时候使用 反应组分 我应该什么时候用 反应纯组分 是吗?

    组成部分:

    import React, { Component } from 'react'
    

    纯成分:

    import React, { PureComponent } from 'react'
    

    我可以在任何地方使用react purecomponent吗?

    使用安全吗 shouldcomponentupdate 然后检查并返回 不需要的

    我刚读了一篇文章,说使用纯组件实际上弊大于利。他们建议使用“react update if changed”。这有多真实?

    条款: https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc

    1 回复  |  直到 8 年前
        1
  •  4
  •   Anush Shukla    8 年前

    我可以在任何地方使用react purecomponent吗?

    是的,您可以尝试使用功能组件越来越多。在类组件的情况下,如果您想实现自己的shouldcomponentupdate,请保持它的小规模,并将它扩展到purecomponent或component,如果在最小的非复杂(嵌套的深数组或/和对象)属性上更改了您的组件需要更新,则建议您这样做。

    使用shouldcomponentupdate安全吗?

    是的,如果您知道自己在做什么,也就是说,实现中的任何缺陷都可能导致性能问题,比如仅仅因为shouldcomponentupdate的实现返回true或更糟,就可能导致不必要的组件重新呈现,因为shouldcomponentupdate返回false,所以组件不会重新依赖某些道具更改。因为一些小故障。

    参考的medium post试图出售react update if changed package,这看起来是一个不错的选择,但是当你意识到

    真正的问题在于性能优化(参见 https://reactjs.org/docs/optimizing-performance.html )

    如何避免不必要的检查以确定组件是否可以更新并避免不必要的重新提交?

    • 传球道具 到你知道的组件 需要 根据组件,将 改变
    • 万一,如果有的话 许多道具 被发送到一个组件 少数有限的道具更改,组件需要更新 然后重新渲染 实现自己的shouldcomponentupdate (请参阅上面的react optimization共享链接中的示例)。但是要小心那些是数组和对象的道具,因为区分它们是一件痛苦的事,特别是那些深而笨重的嵌套道具。
    • 使用 Functional (pure & stateless) component 对于您的ui,而对于它的表示逻辑(show hide、sort等)将出现在 Class (stateful and pure by extending it to React.PureComponent) having children prop as a function ;借助于 HOC 链接逻辑和ui组件
    • 使用 React Context API 当试图在祖先和后代之间传递道具时,特别是如果道具是一个级别超过了像父级组件到子级组件的级别时。

    使用最后一种方法 Advanced React Patterns 是优化性能和代码库的最佳方法。为了更好地理解它,请参考 Dumb and Smart Components Presentational and Container Components 是的。