React，父组件重新渲染会导致子组件重新渲染吗？

Question

React，父组件重新渲染会导致子组件重新渲染吗？

reactjs

5

记录显示我的父组件正在重新渲染自身。
但子组件的渲染方法没有被调用。

我以为子组件会根据以下这个逻辑进行重新渲染，但我认为我是错误的。当父组件重新渲染时，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>
    )
  }

- eugene

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Bonetti · Accepted Answer

React会在props或state改变时重新渲染。如果您扩展了一个PureComponent，则其子元素将检查props是否更改。如果是，则shouldComponendUpdate将返回true，否则返回false。也许这就是问题所在?

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

更新

更改props或state将导致更新。在重新渲染组件时调用这些方法：

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

shouldComponentUpdate()

使用 shouldComponentUpdate() 来告诉 React 组件的输出是否受当前状态或属性的更改影响。默认行为是在每个状态更改时重新渲染，在绝大多数情况下，您应该依赖默认行为。

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

返回 false 不会阻止子组件在其状态更改时重新渲染。

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

如果您确定特定组件在分析后很慢，可以将其更改为继承自 React.PureComponent，该组件使用浅层 prop 和 state 比较实现了 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