javascript - react : Do children always rerender when the parent component rerenders?

Question

据我所知，如果一个父组件重新渲染，那么它的所有子组件都会重新渲染，除非它们实现了 shouldComponentUpdate()。 .我 made an example这似乎不是真的。

我有 3 个组件:<DynamicParent/> , <StaticParent/>和 <Child/> . <Parent/>组件负责呈现 <Child/>但以不同的方式做到这一点。

<StaticParent/>的渲染函数静态声明 <Child/>在运行前，像这样:

 <StaticParent>
    <Child />
 </StaticParent>

虽然<DynamicParent/>处理接收和呈现 <Child/>在运行时动态地，像这样:

 <DynamicParent>
    { this.props.children }
 </DynamicParent>

两者都是 <DynamicParent/>和 <StaticParent/>有onClick听众改变他们的状态并在点击时重新呈现。我注意到点击 <StaticParent/> 时它和 <Child/>被重新渲染。但是当我点击 <DynamicParent/> , 那么只有父代而不是 <Child/>重新渲染。

<Child/>是一个没有shouldComponentUpdate()的功能组件所以我不明白为什么它不重新渲染。有人可以解释为什么会这样吗？我在文档中找不到与此用例相关的任何内容。

Answer 1

我将发布您的上下文实际代码:

class Application extends React.Component {
  render() {
    return (
      <div>
        {/* 
          Clicking this component only logs 
          the parents render function 
        */}
        <DynamicParent>
          <Child />
        </DynamicParent>

        {/* 
          Clicking this component logs both the 
          parents and child render functions 
        */}
        <StaticParent />
      </div>
    );
  }
}

class DynamicParent extends React.Component {
  state = { x: false };
  render() {
    console.log("DynamicParent");
    return (
      <div onClick={() => this.setState({ x: !this.state.x })}>
        {this.props.children}
      </div>
    );
  }
}

class StaticParent extends React.Component {
  state = { x: false };
  render() {
    console.log("StaticParent");
    return (
      <div onClick={() => this.setState({ x: !this.state.x })}>
        <Child />
      </div>
    );
  }
}

function Child(props) {
  console.log("child");
  return <div>Child Text</div>;
}

当您在应用程序渲染中编写此代码时:

<StaticParent />

渲染出来的是这样的:

 <div onClick={() => this.setState({ x: !this.state.x })}>
    <Child />
 </div>

在现实中，发生的(大致)是这样的:

function StaticParent(props) {
  return React.createElement(
    "div",
    { onClick: () => this.setState({ x: !this.state.x }) },
    React.createElement(Child, null)
  );
}

React.createElement(StaticParent, null);

当您像这样渲染 DynamicParent 时:

<DynamicParent>
    <Child />
</DynamicParent>

这就是实际发生的事情(再次粗略地说)

function DynamicParent(props) {
    return React.createElement(
        "div",
        { 
            onClick: () => this.setState({ x: !this.state.x }), 
            children: props.children 
        }
    );
}

React.createElement(
      DynamicParent,
      { children: React.createElement(Child, null) },
);

在这两种情况下都是 child :

function Child(props) {
    return React.createElement("div", props, "Child Text");
}

这是什么意思？那么，在您的 StaticParent 组件中，每次调用 StaticParent 的渲染方法时，您都会调用 React.createElement(Child, null)。在 DynamicParent 的情况下，Child 被创建一次并作为 Prop 传递。由于 React.createElement 是一个纯函数，因此它可能在某处被内存以提高性能。

在 DynamicParent 情况下，Child 的渲染再次运行的原因是 Child 的 Prop 发生了变化。例如，如果父级的状态被用作子级的 Prop ，那么在这两种情况下都会触发重新渲染。

我真的希望 Dan Abramov 不会出现在评论中来破坏这个答案，写起来很痛苦(但很有趣)