Реакция: всегда ли дочерние элементы перерисовываются, когда родительский компонент перерисовывает?

Я отправлю ваш фактический код для контекста:

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 следующим образом:

<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 вы вызываете React.createElement(Child, null) каждый раз, когда вызывается метод рендеринга StaticParent. В случае DynamicParent дочерний элемент создается один раз и передается как опора. А поскольку React.createElement - это чистая функция, то, вероятно, она где-то запомнена для повышения производительности.

Что заставило бы отрисовку Child снова запускаться в случае DynamicParent, так это изменение свойств Child. Если, например, состояние родительского элемента использовалось в качестве опоры для дочернего элемента, это вызвало бы повторный рендеринг в обоих случаях.

Я действительно надеюсь, что Дэн Абрамов не появится в комментариях, чтобы отбросить этот ответ, это было больно писать (но интересно)

Это в основном из-за того, что у вас есть 2 разных «ребенка».

• this.props.children
• <Child/>

Это не одно и то же, первый - это prop, переданный от Application -> DynamicParent, а второй - это Component, отображаемый в StaticParent, у них есть отдельные циклы рендеринга / жизненного цикла.

Ваш включенный пример

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 Application extends React.Component {
  render() {
    // If you want <Child/> to re-render here
    // you need to `setState` for this Application component.
    const childEl = <Child />;
    return (
      <div>
        {/* 
          Clicking this component only logs 
          the parents render function 
        */}
        <DynamicParent>
          {childEl}
        </DynamicParent>

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

В качестве комментария к ответу SrThompsons: «Что заставило бы отрисовку Child снова запускаться в случае DynamicParent, так это изменение свойств Child. Если состояние родителя использовалось как опора для Child, например, это вызвало бы повторную визуализацию в в обоих случаях ". Таким образом, реквизиты или нет реквизиты, переданные дочернему компоненту, как бы это ни выглядело, вызовут повторную визуализацию, если родительский повторный рендеринг (поэтому используйте React.memo для дочернего компонента без реквизита :))

«Реализуете ли вы свой компонент как компонент класса, расширяющий React.Component, или как функциональный компонент, функция рендеринга вызывается снова всякий раз, когда родительский контейнер снова рендерится». Пожалуйста, прочтите здесь для получения дополнительной информации, потому что это отличная статья. https://medium.com/free-code-camp/yeah-hooks-are-good-but-have-you-tried-faster-react-components-e698a8db468c "

Он будет повторно отображать только те компоненты, в которых были изменения. Если в дочернем компоненте ничего не изменилось, он не будет повторно отрисован.