时间戳

首页 > 解决方案 > 逻辑理解react hooks，useState和useEffect（或者state和生命周期方法）的区别

reactjs - 逻辑理解react hooks，useState和useEffect（或者state和生命周期方法）的区别

问题描述

我无法理解 useState 和 useEffect 之间的逻辑差异，更准确地说，是状态和生命周期方法之间的逻辑差异。例如，我观看了教程，并查看了 useEffect 的示例：

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  const add = () => {
    setVal((x) => { return x + 1 })
  }
   useEffect(() => {
    if (value > 0) {
      document.title = `Title: ${value}`
    }
   },[value])
  return <>
    <h1>{value}</h1>
    <button className="btn" onClick={add}>add</button>
  </>;
};

当我们点击按钮时，文档的标题显示我们将数字加一。我玩了一点，并完全删除了 useEffect 方法，而是这样做了：

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  document.title = `Title: ${value}`
  const add = () => {
    setVal((x) => { return x + 1 })
  }
  return <>
    <h1>{value}</h1>
    <button className="btn" onClick={add}>add</button>
  </>;
};

猜猜看，它的工作原理与前面的代码相同。那么，useEffect 究竟是如何工作的，这个方法的动机是什么？

PS：请不要给我发文档链接，一些基础教程，请确定，我已经研究过了。我知道我缺少非常简单、非常基本的东西，但我不知道那是什么，以及在哪里解决它。

标签： reactjs

解决方案

useEffect用于跟踪有状态的变量更改更有效 - 它通过仅在值更改时执行回调中的代码来避免不必要的调用，而不是在每次渲染时执行。

在 的情况下document.title，这并不重要，因为这是一项廉价的操作。但如果是runExpensiveFunction，那么这种方法：

const UseEffectBasics = () => {
  const [value, setVal] = useState(0);
  runExpensiveOperation(value);

会有问题，因为每次组件重新渲染时都会运行昂贵的操作。将代码放入useEffect具有[value]依赖关系数组的 a 可确保它仅在需要时运行 - 当value发生更改时。

当涉及由状态更改导致的 API 调用时，这一点尤其重要，这很常见。您不想在每次组件重新渲染时调用 API - 您只想在需要请求新数据时调用它，因此将 API 调用放在 auseEffect中是比将 API 调用放在 main 中更好的方法组件函数体。

推荐阅读