如何在 ReactJS 中渲染没有 re-render 整棵树的树组件的叶组件

Question

成像有一个JS object包含树的定义。叶子的定义如下：

{title:'leaf A'}

树 JS object 看起来像：

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

树组件已呈现，我想在叶组件上触发某些事件时更改叶组件的标题。这可以通过使用 setState() 将树组件的事件处理程序挂接到叶组件和 re-render 树组件来轻松完成。但是，由于这种变化不会导致树的结构发生变化，因此最好不要 re-render 整棵树，而是 re-render 叶子组件。是否有可能在 reactjs 中实现这一点？结果，用于树渲染的JS object中的叶子标题也应该是changed/replaced。

Answer 1

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

shouldComponentUpdate(nextProps, nextState) {

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

  return false;
}

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

如何在 ReactJS 中渲染没有 re-render 整棵树的树组件的叶组件

How to render the leaf component of tree component without re-render entire tree in ReactJS

javascript

optimization

tree

renderpartial

reactjs