reactjs - 如何在子组件中打开和关闭更新？

Question

我有一个ReactJS，它使用在不需要时更新的子组件。

我想通过提供我自己的shouldComponentUpdate函数来控制该子进行更新的时间。可以这样做吗？

请注意下面的评论是指这个问题的第一个版本，它完全没有反映原始问题以及讨论所带来的解决方案。

Answer 1

更新：这不是解决原始问题的正确方法。虽然Kyle的答案是正确的，但解决问题的正确方法是将实现其自己的shouldComponentUpdate函数的更高阶组件中重新渲染的组件包装起来。

@Kyle Richardson得到了这个答案的功劳。它工作得很漂亮！

为了说明Kyle的解决方案，有两个按钮可以关闭子组件中的更新并重新打开它们。

这里的假设是你已经引用了子组件（在本例中为this.refs.table）

  <button
    onClick={() => {if (!!this.refs.table) {this.refs.table.shouldComponentUpdate = () => true}}}>
    child component updates on
  </button>
)

  <button
    onClick={() => {if (!!this.refs.table) {this.refs.table.shouldComponentUpdate = () => false}}}>
    child component updates off
  </button>

请注意，这将破坏任何现有的shouldComponentUpdate函数。您可能以某种方式扩展/覆盖/组合现有函数，但在我的情况下，我不关心，因为没有现有的shouldComponentUpdate。