Question

假设我们有如下两个组成部分

class Exa extends React.Component {
  render() {
    console.log('re-render')
    return <div>{this.props.children}</div>
  }
}

和

class ExaGroup extends React.Component {
  render() {
    return (
      <div>
        <Exa>
          <Exa className={this.props.name}>
            <Exa>
              <Exa>
                Hi
              </Exa>
            </Exa>
          </Exa>
        </Exa>
      </div>
    )
  }
}

因此，如果ExaGroup的道具name被更改，应将多少re-render打印到控制台输出？

据我了解，它将从第二个Exa元素开始卸载整个子树，并重新创建所有子树，因此re-render应该打印三遍。

Answer 1

4次。 name是ExaGroup的属性，因此react重新渲染所有ExaGroup组件。

Answer 2

应将多少re-render打印到控制台输出？

它将打印4次。 ExaGroup收到新的道具，这会触发重新渲染。由于您有4个Exa，因此它将打印4次。

据我所知，它将从第二个Exa元素开始卸载整个子树，并重新创建所有子树，因此重新渲染应打印3次。

不要将重新渲染与重新安装混淆。重新渲染意味着组件由于状态或prop突变而经历了React对帐过程，以找出其树中的哪些元素（如果有的话）需要更新或重新创建。

React将仅在元素类型更改或键更改之后拆解并重建元素树。在其他所有情况下，React只会更新具有适当更改的现有元素。

More info

React是否会重新渲染所有子级？

2 个答案: