子组件改进器中的支柱值

Question

我正在学习反应，并有两个关于改进型行为的问题。假设父组件将状态传递给子组件作为支柱。如果状态发生变化，子组件是否会被重命名两次？我认为是这样的，因为首先，状态更改会触发父程序中的重分发器，而父重分发器会触发子重分发器，而第二次子组件中的支持更改也会触发子更新。我的身份正确吗？我的第二个问题是，如果子组件被重命名两次，那么第一次重命名器中的道具值是多少？它是否仍然有旧的价值，因为这个改进机不是由道具更改触发的？

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在呈现这些元素时查看控制台。

如果您将一个状态变量传递给子组件(在上面的示例中它是ss变量)，那么当您在子组件中对它进行变异时，不会发生任何事情，因为它只是一个局部变量，因此在该场景中不会重新呈现任何内容。