时间戳

首页 > 解决方案 > useState 和 props 的变化

javascript - useState 和 props 的变化

问题描述

我试图了解当您同时拥有props一个useState组件时会发生什么。

我写了一个小例子，它有一个父组件用另一个子组件打印它的数字 -

const MyNumbers = (props) => {
  const [numbers, setNumbers] = useState([...props.arr]);

  function changeNumbers() {
    setNumbers((nums) => [...nums.map(() => Math.floor(Math.random() * 10))]);
  }

  return (
    <div className="MyNumbers">
      <div>
        <button onClick={changeNumbers}>Chane numbers</button>
      </div>
      <div>
        {numbers.map((num, idx) => (
          <SingleNumber key={idx} num={num}></SingleNumber>
        ))}
      </div>
    </div>
  );
};

const SingleNumber = (props) => {
  const [num] = useState(props.num);
  useEffect(() => {
    console.log("useEffect called");
  });
  return <h3>The number is {num}</h3>;
};

这是上面的演示

该SingleNumber组件使用useState并且您可以看到单击“更改数字”操作不会更改子组件中的值。

但是当我编写几乎相同的代码但现在SingleNumber不使用useState时，然后单击“更改数字”会更改子组件中的所有值（就像在这个演示中一样）。

是否正确地说具有 a 的功能组件useState呈现一次，然后仅在状态更改时才更改，但在更改时不props更改？

标签： javascriptreactjsreact-hooksuse-state

解决方案

当道具更改时，OFC 组件“重新渲染”，其中的钩子useEffect向您显示每次道具更改时都会运行“渲染阶段”......每次渲染组件时都会运行效果。SingleNumber

在此处输入图像描述

const SingleNumber = (props) => {
  const [num] = useState(props.num);
  useEffect(() => {
    console.log("useEffect called"); // <-- logged each time the component renders
  });
  return <h3>The number is {num}</h3>;
};

如果您添加了对本地状态的依赖props.num并更新了本地状态（实际上不要这样做，这是反应中的反模式！），您将看到每次道具更新时 UI 都会再次更新。

要回答您的问题：

是否正确地说具有 a 的功能组件useState呈现一次，然后仅在状态更改时才更改，但在更改时不props 更改？

不，这在技术上是不正确的，如果“渲染”对您意味着严格反应渲染组件以计算差异，反应组件在状态或道具更新时重新渲染。是的，如果“渲染”更普遍地意味着您可以直观地看到 UI 更新。

推荐阅读