我可以在反应 function 组件中使用“让”吗？

Question

我目前正在学习 React。

我可以在 function 组件中使用“let”而不是使用“useState”吗？

const Func = () => {
  let fruit = "banana";

  const changeFruit = () => {
    fruit = "apple"
  };

  changeFruit();
}

const Func = () => {
  const [fruit, setFruit] = useState("banana");

  const changeFruit = () => {
    setFruit("apple");
  };

  changeFruit();
}

Answer 1

这不是功能组件，因为功能组件必须返回一个 React 元素。

如果它是一个功能组件，并且您在返回元素之前同步更改变量，那很好：

const Func = () => {
  let fruit = "banana";

  const changeFruit = () => {
    fruit = "apple"
  };

  changeFruit();

  return <>{fruit}</>; // displays "apple"
};

如果您异步更改它，例如

  setTimeout(changeFruit, 1000);

那么组件在变量更改后不会重新渲染。 这不是你通常想要的。 如果你useState并调用setFruit function，组件会重新渲染。

Answer 2

我可以在 function 组件中使用“let”而不是使用“useState”吗？

答案是否定的，你不能用 let 代替 state。 您的组件不会重新渲染，这就是 state 的全部意义所在

请考虑React文档以帮助您理解 React 中 state 的概念

希望能帮助到你