useState 和 props 的变化

Question

我想知道，当你有两个发生了什么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？

Answer 1

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本地状态的依赖并更新了它（实际上不要这样做，这是 react 中的一种反模式！），每次 props 更新时，您都会看到 UI 再次更新。

回答您的问题：

说一个带有 a 的函数组件useState渲染一次然后只在状态改变时改变而不是改变时才改变是否正确props ？

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