深入useEffect ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 10 天 useEffect允许

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

useEffect允许我们在组件渲染后执行副作用操作，例如获取数据、更新DOM等等。

在本文中，我将深入探讨useEffect的一些关键方面，包括如何使用它以及它的一些高级用法。

一、基本用法

useEffect需要两个参数：一个函数和一个可选的依赖数组。

import { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在这个例子中，useEffect接收一个函数，该函数在组件渲染后会被调用。在这个函数中，我们将文档标题设置为当前计数器的值。我们还传递了一个依赖数组，该数组告诉React什么情况下应该重新运行副作用函数。在这个例子中，我们只希望在计数器的值发生变化时重新运行副作用函数。

二、清理副作用

在某些情况下，我们可能需要在组件卸载或下一次运行副作用函数之前清理副作用。这是使用useEffect的另一个非常有用的功能。为了清理副作用，我们可以从副作用函数返回一个函数。

useEffect(() => {
  const interval = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(interval);
}, []);

在这个例子中，我们创建了一个定时器，每秒钟将计数器的值增加1。在返回函数中，我们清除了定时器以防止泄漏。请注意，我们还将依赖数组设置为空数组，以确保副作用函数只运行一次，并在组件卸载时清除定时器。

useEffect的本质

useEffect的本质原理是通过链表记录所有的Hook

其每次调用都会进入hook list中
会加入一个effect list 记录等待执行的 Effect 函数
render后依次执行对应的函数

总结

总之，useEffect的本质原理是通过React的内部API来实现的，它提供了一种方便和灵活的方式来处理组件中的副作用操作。通过理解其本质原理，我们可以更好地使用和掌握useEffect，并构建更好的React应用程序。

深入useEffect ｜ 青训营笔记

useEffect的本质

总结

深入useEffect ｜青训营笔记