Javascript 道具的使用状态和变化

我试图理解当一个组件中同时包含

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>
  );
};

constmynumbers=（道具）=>{
const[numbers，setNumbers]=useState（[…props.arr]）；
函数changeNumbers（）{
setNumbers（（nums）=>[…nums.map（（）=>Math.floor（Math.random（）*10）））；
}
返回(
通道数
{numbers.map（（num，idx）=>(
))}
);
};

const SingleNumber=（道具）=>{
const[num]=useState（props.num）；
useffect（（）=>{
log（“调用useffect”）；
});
返回数值为{num}；
};

SingleNumber

组件使用

useState

，您可以看到，单击“更改数字”操作不会更改子组件中的值

但是当我编写了几乎相同的代码，但现在

SingleNumber

没有使用

useState

时，单击“更改数字”会更改子组件中的所有值（）

如果说一个带有

useState

的函数组件只渲染一次，然后仅在状态更改时才更改，但如果

props

更改，则不会更改，这是正确的吗？

OFC组件“重新渲染器”当props更改时，

useffect

挂钩

SingleNumber

会向您显示每次道具更改时都会运行“渲染阶段”……每次渲染组件时都会运行效果

const SingleNumber=（道具）=>{
const[num]=useState（props.num）；
useffect（（）=>{
console.log（“useffect called”）；//当您调用
useState
时，它返回一个包含两个值的数组：

该状态位的当前值
更新状态的函数
如果在将状态设置为默认值并返回该值时没有当前值

（默认值是传递给
useState
的参数）


如果在示例中更改
props
的值，则组件将重新渲染

useState
返回该状态位的当前值。状态有一个值，因此它与传递给
useState
的参数无关。该值是否已更改并不重要

由于输出中没有其他更改，因此重新提交的组件不会更新DOM。
您不需要在
SingleNumber
中使用
useState

因为
useState
在渲染时只调用一次

const SingleNumber=（道具）=>{
//const[num]=useState（props.num）；
//useffect（（）=>{
//log（“调用useffect”）；
// });
返回的数字为{props.num}；
};

如果要使用
useState
，可以这样使用

const SingleNumber=（道具）=>{
const[num，setNum]=useState（props.num）；
useffect（（）=>{
log（“调用useffect”）；
setNum（props.num）；
}，[props.num]）；
返回数值为{num}；
};

如果说一个具有useState的函数组件只呈现一次，然后仅在状态更改时才更改，而道具更改时不更改，这样说是否正确

不，它会重新加载，但不会提交更改

当父组件
MyNumbers
通过单击
changeNumbers
重新呈现时，默认情况下（除非使用
React.memo
），其所有子组件（如
singlenumbers
）都将重新呈现

现在当
SingleNumber
重新播放时，请注意

在初始呈现期间，返回的状态（state）与作为第一个参数（initialState）传递的值相同

您可以初始化状态
useState（props.num）
，但只能通过调用setter函数来更改，因此状态
num
不会更改，因为您从未调用setter

但它将如上所述在父级渲染时重新渲染（请注意
useffect
日志）。
组件每次都会重新渲染。但实际上，您已经将值缓存在本地状态并一直输出。传递给
useState
的值仅在安装组件时使用（仅限首次）。
useffect
以更改道具为条件是最简单的管理方法。
const SingleNumber = (props) => {
  const [num] = useState(props.num);
  useEffect(() => {
    console.log("useEffect called");
  });
  return <h3>The number is {num}</h3>;
};

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>;
};