React:如何比较当前的props.children和新的props.children

Question

嗨,

我正在构建仅作为其他一些生成内容的包装器并使用第三方库的组件.该库使用props.children组件.到目前为止一切都那么好,但这个四方派对库在应用或刷新元素时有点滞后.因为只有理由刷新这个库才会props.children改变,我试图想出如何比较this.props.children和nextProps.children进入shouldComponentUpdate.我当时认为PureRenderMixin应该做的工作,但对我来说它不起作用.即使我仅state.listName在下面的示例中进行更改,也会重新呈现组件.

<div>
  List name '{this.state.listName}'
  <br />
  <MyComponent>
    <ul>
      {listOfLi}
    </ul>
  </MyComponent>
</div>

有没有办法,如何管理比较props.children或任何其他选项如何做这样的事情？谢谢你的帮助!

Answer 1

你可以利用 childkey属性，React 建议应该给出子数组来唯一地标识它们。因为每个子项都有一个键，所以您可以可靠地判断子项是否因道具更改而发生变化（这就是键的全部要点！）。如果新旧密钥不匹配，则它们已更改。

React.render(<App><Child key='1'/><Child key='2'/></App>, document.body)

并在每次更新之前检查您想要检查的应用程序组件是否更改了子组件

shouldComponentUpdate(nextProps){
   var oldKeys = this.props.children.map( child => child.key);
   var newKeys = nextProps.children.map( child => child.key);

   //compare new and old keys to make sure they are the same
}

请注意，这并不能告诉您每个子级的内容是否已更改，如果您想知道该点以下的整个树中是否没有任何内容发生更改，您必须通过某些标准（例如深度比较道具）来比较每个子级

作为进一步的优化，我们知道子项永远不会因状态更改而改变，因此我们实际上可以进行比较componentWillReceiveProps()并仅设置一些状态属性，例如childrenHaveChanged