useEffect

副作用的一些示例是：获取数据、直接更新 DOM 和计时器

useEffect 接受两个参数。第二个参数是可选的

useEffect(<function>, <dependency>)

使用 setTimeout() 在初始渲染后计算 1 秒:

实时编辑器

function Timer() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  })
  return <h1>I've rendered {count} times!</h1>
}

render(Timer)

function Timer() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  })
  return <h1>I've rendered {count} times!</h1>
}

render(Timer)

结果

警告

可是等等！！它一直在计数，即使它应该只计数一次！

useEffect 在每个渲染器上运行。这意味着当计数发生变化时，会发生渲染，然后触发另一个效果

这不是我们想要的。有几种方法可以控制副作用何时运行

我们应该始终包含接受数组的第二个参数。我们可以选择将依赖项传递给此数组中的 useEffect

所以，要解决这个问题，让我们只在初始渲染上运行这个效果

实时编辑器

function Timer() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)
  }, []) // <- 在此处添加空括号
  return <h1>I've rendered {count} times!</h1>;
}

render(<Timer />)

function Timer() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)
  }, []) // <- 在此处添加空括号
  return <h1>I've rendered {count} times!</h1>;
}

render(<Timer />)

结果

下面是一个依赖于变量的 useEffectHook 示例

如果 count变量更新，效果将再次运行：

实时编辑器

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);
  useEffect(() => {
    setCalculation(() => count * 2)
  }, [count]); // <- 在此处添加 count变量
  return (
    <>
      <p>Count: {count}</p>
      <button className="uk-button" onClick={() => setCount((c) => c + 1)}> * 2</button>
      <br />
      <br />
      <p>运算: {calculation}</p>
    </>
  );
}

render(<Counter />)

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);
  useEffect(() => {
    setCalculation(() => count * 2)
  }, [count]); // <- 在此处添加 count变量
  return (
    <>
      <p>Count: {count}</p>
      <button className="uk-button" onClick={() => setCount((c) => c + 1)}> * 2</button>
      <br />
      <br />
      <p>运算: {calculation}</p>
    </>
  );
}

render(<Counter />)

结果

提示

如果有多个依赖项，它们应该包含在 useEffect 依赖项数组中

Effect 清理

某些效果需要清理以减少内存泄漏

超时、订阅、事件监听器和其他不再需要的效果应该被丢弃

我们通过在 useEffectHook 的末尾包含一个返回函数来做到这一点

实时编辑器

// 在 useEffect Hook 结束时清理定时器：
function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000)
    return () => clearTimeout(timer)
  }, [])

  return <h1>I've rendered {count} times!</h1>
}

render(<Timer />)

// 在 useEffect Hook 结束时清理定时器：
function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000)
    return () => clearTimeout(timer)
  }, [])

  return <h1>I've rendered {count} times!</h1>
}

render(<Timer />)

结果

警告

要清除计时器，我们必须给它命名

Effect 清理​

Effect 清理