如何在 ReactJS 中渲染树组件的叶子组件而不重新渲染整个树答案

【问题标题】：How to render the leaf component of tree component without re-render entire tree in ReactJS如何在 ReactJS 中渲染树组件的叶子组件而不重新渲染整个树
【发布时间】：2017-06-27 10:05:07
【问题描述】：

想象有一个JS对象包含树的定义。叶的定义如下：

{title:'leaf A'}

树 JS 对象看起来像：

{{title:'leaf A', children:{title:'children of leaf A'}}}

树组件已渲染，我想在叶组件上触发某些事件时更改叶组件的标题。这可以通过将树组件的事件处理程序挂钩到叶组件并使用 setState() 重新渲染树组件来轻松完成。但是，由于这种变化不会导致树的结构发生变化，所以最好不要重新渲染整个树，而是重新渲染叶子组件。是否有可能在 reactjs 中实现这一点？因此，用于树渲染的 JS 对象中的叶子标题也应该更改/替换。

【问题讨论】：

看来你不明白 React 是如何工作的。它使用虚拟 DOM，因此只有实际更改的部分才会重新渲染。
@hindmost 我不认为当你自己似乎不明白发生了什么的时候大声叫人是不明智的。 React 组件会在每次它们的 props / state 改变时重新渲染，无论你是否想要。有时您不想在某个道具更改时重新渲染（例如，具有新实例的函数）。另外我建议停止使用术语虚拟 DOM。

标签： javascript reactjs optimization tree renderpartial

【解决方案1】：

你可以使用 shouldComponentUpdate 方法来接受新的 props 和新的状态，然后你可以决定是否要重新渲染。

shouldComponentUpdate(nextProps, nextState) {

  // Update this component ONLY when the prop someProp changes
  if (this.props.someProp !== nextProps.someProp) {
    return true;
  }

  return false;
}

我建议检查 recompose 实用程序带中的高阶组件 onlyUpdateForKeys - https://github.com/acdlite/recompose

【讨论】：

非常感谢。看起来这是反应文档中也提到的唯一方法。我最终决定不优化它，因为 1. 优化太早，到目前为止看起来还不错，因为树上没有太多叶子。 2.叶子只是标题被更改的另一个组件的包装器，叶子中的组件会有所不同，因此需要不同的 shouldComponentUpdate() 方法逻辑，此外，叶子无论如何都会重新渲染，并且只有被包装的组件将从这种优化中受益。
在有更好的答案之前，我将把它标记为答案