如何在不破坏 shouldComponentUpdate 的情况下将对象/子对象作为道具传递？答案

【问题标题】：How does one pass objects / children as props without breaking shouldComponentUpdate?如何在不破坏 shouldComponentUpdate 的情况下将对象/子对象作为道具传递？
【发布时间】：2016-03-29 18:08:55
【问题描述】：

考虑Parent Component的两种不同的渲染方法，P：

示例 1

render() {
  return 
  <ChildComponent propA={ { staticKey: staticValue} }/>
}

示例 2

render() {
  return someStaticData.map( data => 
    <ChildComponent>
      <span> 
      {
       data.value.map(dataInner => 
         <span>
           { dataInner.value } 
         <span>
      )} 
     </span>
    </ChildComponent>
  )
}

在子组件中

子组件按照 React Guide 的建议处理 shouldComponentUpdate。

shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this, nextProps, nextState);
}

在上述两种示例情况下，子组件的shallowCompare总是返回 true，即使我传递的对象/子对象完全相同（因为引用已更改）。这会导致大量的渲染浪费。

如何在不破坏 SCU 的情况下将静态对象/子对象作为道具传递？

【问题讨论】：

将 render() 的结果存储在可以通过两个示例访问的变量中。现在您可以在调用 SCU 时引用相同的变量
@stackErr 将适用于示例 1。但在示例 2 的情况下，如果孩子是一个两级嵌套循环，我不能把它带到外面。
@stackErr 看到更新的示例#2？
嗯，好问题，这超出了我的专业知识。对 reactjs/JS 有更多了解的人可以对此有所了解。
你需要比单线多花一点力气......即使JSON.stringify(this.props)!=JSON.stringify(nextProps) 可能仍然比过度渲染更快，但你可以通过自定义内省做得更好。尝试缓存 SCU 中最后一个有意义的值以进行比较。

标签： javascript reactjs react-jsx

【解决方案1】：

也许切换到不可变数据结构会有所帮助，因为那时 SCU 挂钩只需要比较引用不等式：

http://facebook.github.io/immutable-js/

https://github.com/rtfeldman/seamless-immutable

【讨论】：