Question

我正在学习 React 并且有 2 个关于重新渲染行为的问题。假设父组件将状态作为道具传递给子组件。如果状态发生变化，子组件是否会重新渲染两次？我认为是这样，因为首先状态更改触发父级重新渲染，父级重新渲染触发子级重新渲染，子组件中的第二个 prop 更改也触发子级重新渲染。我的理解正确吗？我的第二个问题是，如果子组件像我上面所说的那样被重新渲染两次，那么第一次重新渲染中的 prop 值是多少？由于此重新渲染不是由道具更改触发的，它是否仍然具有旧值？

Answer 1

您不能将状态本身从父元素传递给子元素。但是您可以传递对更新父状态的函数的引用。当孩子调用它时，父级将被渲染一次，而子级将被渲染一次。考虑以下代码：

import React from "react";
import "./styles.css";

const ChildEl = ({ updateParentState }) => {
  console.log("Rendering child");
  return (
    <div>
      Child ELemente
      <button onClick={() => updateParentState("some value from child")}>
        Click me
      </button>
    </div>
  );
};

export default function App() {
  const [ss, setSS] = React.useState("Original value");
  console.log("Rendering parent");
  const updateState = (v) => setSS(v);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{ss}</h2>
      <ChildEl updateParentState={updateState} />
    </div>
  );
}

在第一次渲染时，父级和子级都会被渲染一次。然后，当您单击更新父级中状态变量的子级中的按钮时，会发生同样的事情 - 父级和子级都渲染一次。这是适合您的沙盒：https://codesandbox.io/s/nostalgic-tdd-mznbb?file=/src/App.js 在渲染这些元素时查看控制台。

如果你将一个状态变量传递给 Child 组件（在上面的例子中它是 ss 变量），那么当你在 Child 内部改变它时什么也不会发生，因为它变成了一个纯粹的局部变量，所以什么都不会得到重新- 在那个场景中渲染。

子组件重新渲染中的道具值

1 个答案: