React Hooks 源码解读之 useEffect

## React Hooks 源码解读之 useEffect

React Hooks 是 React 16.8 引入的新特性，它提供了一种新的方式来管理组件的状态和行为。与传统的 class 组件相比，Hooks 更加简洁、易用，而且可以跨平台使用。

useEffect 是 React Hooks 中的一个重要函数，它用于在组件挂载和更新时执行某些副作用操作。比如，你可以用它来在组件挂载时获取数据，或者在组件更新时更新 DOM。

useEffect 的基本用法如下：

useEffect(() => {
// 在组件挂载和更新时执行的副作用操作
}, [dependencies]);

第一个参数是一个函数，该函数会在组件挂载和更新时执行。第二个参数是一个数组，它指定了 useEffect 应该在哪些条件下执行。如果数组为空，则 useEffect 会在组件每次挂载和更新时执行。如果数组非空，则 useEffect 只会在数组中的值发生变化时执行。

下面我们来看一下 useEffect 的源码实现：

function useEffect(create, deps) {
const oldDeps = currentHook.deps;
const hook = updateEffect(create, deps);
// ...省略无关代码...
}

useEffect 函数首先会检查当前 Hook 的依赖项数组 oldDeps 是否与传入的依赖项数组 deps 相同。如果相同，则说明 useEffect 不需要重新执行，直接返回即可。如果不同，则说明 useEffect 需要重新执行，于是调用 updateEffect 函数来执行副作用操作。

updateEffect 函数的实现如下：

function updateEffect(create, deps) {
const destroy = currentHook.destroy;
if (destroy !== null) {
destroy();
}
currentHook.destroy = create();
// ...省略无关代码...
}

updateEffect 函数首先会调用 currentHook.destroy() 来销毁上一次副作用操作的清理函数。然后，它会调用 create() 来执行副作用操作。最后，它会将 create() 返回的清理函数存储在 currentHook.destroy 中。

这就是 useEffect 的源码实现。通过阅读源码，我们可以更加深入地理解 useEffect 的工作原理和用法。

## 总结

useEffect 是 React Hooks 中的一个重要函数，它用于在组件挂载和更新时执行某些副作用操作。useEffect 的基本用法如下：

useEffect(() => {
// 在组件挂载和更新时执行的副作用操作
}, [dependencies]);

useEffect 函数的第一个参数是一个函数，该函数会在组件挂载和更新时执行。第二个参数是一个数组，它指定了 useEffect 应该在哪些条件下执行。如果数组为空，则 useEffect 会在组件每次挂载和更新时执行。如果数组非空，则 useEffect 只会在数组中的值发生变化时执行。

通过阅读 useEffect 的源码，我们可以更加深入地理解 useEffect 的工作原理和用法。