React，父级渲染会让孩子重新渲染吗？-Java 学习之路

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

我认为孩子用以下逻辑重新投降，我认为我错了 . 当父母重新渲染时，如何确定哪些子组件被重新渲染？

Parent的渲染
- 孩子的 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 回答

4
在 props 或 state 更改时重新呈现 . 如果您扩展了PureComponent，孩子们会检查道具是否已更改 . 如果是 - > shouldComponendUpdate将返回true，否则返回false . 也许是这样的？

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

Updating

更改道具或状态可能会导致更新 . 在重新渲染组件时会调用这些方法：
```
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和状态比较的> shouldComponentUpdate（） . 如果您确信要手动编写它，可以将this.props>与nextProps和this.state与nextState进行比较，并返回false告诉>可以跳过React更新 .

您可以在以下页面找到有关反应渲染过程的一些文档：https://facebook.github.io/react/docs/reconciliation.html https://facebook.github.io/react/docs/optimizing-performance.html
回复于 2024-04-29T14:39:19+08:00

React，父级渲染会让孩子重新渲染吗？

1 回答

相关问题