Question

我有一个问题，为什么子组件在3d时没有重新渲染。

请看下面的代码，我有一个带有状态挂钩的Parent组件，并通过setState函数来执行Child组件。在Child中，它有一个超时，它将在2秒后将状态更改为false。另外，console.log我在“父级”或“子级”组件渲染时使用。

请参阅代码下面的控制台日志，我可以理解为什么两个组件都会重新渲染两次，以及何时父组件在第三次重新渲染，但是我不明白为什么孩子也停止了第三次重新渲染？

Code sandbox

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Parent() {
  const [loading, setLoading] = useState(true);
  console.log("rendering Parent", loading);
  return (
    <div className="App">
      {loading ? "Parent is loading" : "Loaded"}
      <Child onLoading={setLoading} />
    </div>
  );
}

function Child({ onLoading }) {
  console.log("rendering Child");
  setTimeout(() => onLoading(false), 2000);
  return <div>Order</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

rendering Parent true          
rendering Child 
rendering Parent false  // Parent state changed, parent render
rendering Child         // Child props haven't changed, why Child render?
rendering Parent false  // Parent state unchanged, parent only re-renders itself?

Answer 1

这是因为状态加载变量只有两个可能的值（true和false）。将其设置为false后，它将不再更改，因此不需要重新渲染。为了便于说明，请尝试将加载布尔值更改为整数。添加一个而不是将其翻转为false，然后查看它将如何永久永久地每2秒重新渲染一次，直到关闭浏览器为止。像这样：

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Parent() {
  const [loading, setLoading] = useState(0);
  console.log("rendering Parent", loading);

  function Child({ onLoading }) {
    console.log("rendering Child");
    setTimeout(() => onLoading(loading+1), 2000);
    return <div>Order {loading}</div>;
  }

  return (
    <div className="App">
      {loading === 0 ? "Parent is loading" : "Loaded " + loading + " times"}
      <Child onLoading={setLoading} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

反应：为什么孩子第三次停止重新渲染

1 个答案: