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

Question

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

我认为 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>
    )
  }

Answer 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