React，是不是在父级上渲染会使子级重新渲染？

Posted 2023-02-22

【中文标题】React，是不是在父级上渲染会使子级重新渲染？

【英文标题】：React, Does render on parent makes children re-render?React，是否在父级上渲染会使子级重新渲染？

【发布时间】：2017-03-06 05:00:53

【问题描述】：

日志显示我的父组件正在重新渲染自己。 但是子组件的渲染方法没有被调用。

我认为 child 使用以下逻辑重新渲染，我认为我错了。 当父组件重新渲染时，react 如何决定哪些子组件被重新渲染？

父级渲染 -> 孩子的shouldComponentUpdate 被调用 -> 如果 shouldComponentUpdate 返回 true，则子级重新渲染

父渲染看起来像

  render() 

    let  viewConfig  = this.props
    console.log("ViewConfigSettingBase rendering")
    return (
      <div>
        
          Object.keys(viewConfig.availableSubviewConfigMap).map((sectionName, index) => 
            var subviewConfigData = viewConfig.availableSubviewConfigMap[sectionName]
            return (
              <ViewConfigSettingRow
                key=sectionName
                viewConfigData=subviewConfigData
                sectionName=sectionName
                parentViewConfig=viewConfig
                />
            )
          )
        
      </div>
    )
  

【参考方案1】：

React 重新渲染 props 或 state 变化。如果您扩展了 PureComponent，孩子们将检查道具是否已更改。如果是 -> shouldComponendUpdate 将返回 true，否则返回 false。也许是这样？

组件生命周期： https://facebook.github.io/react/docs/react-component.html

更新

更新可能是由 props 或 state 的更改引起的。 >当重新渲染组件时会调用这些方法：

componentWillReceiveProps()  
shouldComponentUpdate()  
componentWillUpdate()  
render()  
componentDidUpdate()  

shouldComponentUpdate()

使用 shouldComponentUpdate() 让 React 知道组件的输出是否 > 不受当前状态或道具变化的影响。 >默认行为是在每次状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为。

shouldComponentUpdate() 在接收到新的 props 或 >state 时在渲染之前调用。默认为 true >初始渲染或使用 forceUpdate() 时不调用此方法。

返回 false 不会阻止子组件在其状态发生变化时重新渲染。

目前，如果 shouldComponentUpdate() 返回 false，则 >componentWillUpdate()、render() 和 componentDidUpdate() 将不会被 >invoked。请注意，将来 React 可能会将 shouldComponentUpdate() >视为提示而不是严格指令，返回 false 仍可能导致组件重新渲染。

如果您在分析后确定特定组件速度较慢，您可以 > 将其更改为从 React.PureComponent 继承，后者通过浅 prop 和状态比较实现 >shouldComponentUpdate()。如果你 > 确信你想手动编写它，你可以将 this.props > 与 nextProps 和 this.state 与 nextState 进行比较，并返回 false 以告诉 >React 可以跳过更新。

您可以在以下页面上找到有关 react 渲染过程的一些文档： https://facebook.github.io/react/docs/reconciliation.html https://facebook.github.io/react/docs/optimizing-performance.html

【讨论】：

所以如果我理解正确的话，PureComponent 与Component 的不同之处仅在于前者在shouldComponentUpdate 中实现了浅相等，而后者总是返回true。不管是不是 Pure，如果 SCU 返回 false，render 不会被调用，甚至子组件都不会重新渲染，它们也不会收到新的 props。但是，如果子组件的state 被更改（人为地），即使父组件没有重新渲染，它也可以重新渲染。对吗？