反应阻止来自父容器的子更新

Question

我正在使用一个反应颜色选择器，它在变化时改变状态（每秒很多次）。 因为状态改变了我的组件，并且它的所有子组件都被重新渲染。 我无法控制子项，因为它们是从其他库（reactstrap 和 react-fontawesome）导入的，因此我需要一种方法来防止它们从父容器中更新。

我可以创建一个带有自定义shouldComponentUpdate()的包装器组件，但该解决方案似乎有点shouldComponentUpdate() ，所以我很好奇是否有针对此的预期解决方案。

我的代码的相关部分：

//all components come from libraries so I have no control over them
    <SketchPicker
       color={this.state.color}
       onChange={this.handleChangeColor}
    />

  handleChangeColor = color => {
    this.setState({ color: color.rgb });
  };

//rest of the code is made of multiple
 <NavItem>
  <NavLink ... >
    <FontAwesomeIcon ... />
  </NavLink>
</NavItem>

我的一些导航项目依赖于实时颜色信息，但大多数不依赖

Answer 1

如果你传递的 props 没有改变，你确实可以使用shouldComponentUpdate甚至更好的React.PureComponent 。 如果从顶层传递的 props 与之前的 props 相同，PureComponent 子组件将不会重新渲染。 比较是肤浅的，因此它不适用于深度嵌套的道具。

在这里阅读更多。

Answer 2

我你使用 redux 你可以使用reselect 。 除非参数之一发生变化，否则不会重新计算选择器（本质上是道具）。