React：当父组件重写时，子组件总是重写吗？

Question

我有3个组件: 、 和 。 组件负责呈现 ,但其方式不同。

的render函数在运行时之前静态声明 ，如下所示：

 <StaticParent>
    <Child />
 </StaticParent>

而 则处理在运行时动态接收和呈现 ,如下所示：

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

和 都具有onclick侦听器，以便在单击时更改其状态和重写器。我注意到，当单击 时，它和 都将被重新呈现。但是当我单击 时，将只重新呈现父级，而不是 。

是一个没有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 Texts</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>
    <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) },
);

这是两种情况下的孩子：

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

这是什么意思？那么，在StaticParent组件中，每次调用StaticParent的render方法时都调用react.createElement（Child,null)。在DynamicParent案例中，子级只创建一次并作为道具传递。由于react.createElement是一个纯函数，因此可能会将其存储在某个地方以提高性能。

在DynamicParent案例中，使Child的呈现再次运行的是Child道具的更改。例如，如果父级的状态被用作子级的道具，那么在这两种情况下都将触发重新呈现。