React 内置 Hook 之 useEffect

前言

Hook 是一种特殊的函数，使得你能够在不更改组件结构的条件下，重用组件之间的状态相关逻辑，进步提升我们代码的复用性和可维护性。其中，useEffect作为核心的一部分，帮助我们解决在类组件中副作用相关逻辑复杂难懂的问题。

理解了 Hook 的概念，让我们现在深入探讨它其中一个重要的应用——useEffect。

useEffect 是什么

useEffect 是React的核心Hook之一。它让你可以在函数组件中执行副作用操作。副作用操作可能包括数据获取、设置订阅以及手动更改 React 组件中的 DOM 等操作。

useEffect 的使用

使用 useEffect 关键是理解它的 依赖数组这个概念。当数组中的依赖发生变化时，useEffect 的回调函数将会被执行，具体的使用方法如下：

text
useEffect(() => {
  // 执行你的副作用逻辑
  console.log('Component has mounted or updated');
}, [ /* 这里放置你的依赖项数组 */]);

其中的依赖项数组非常关键。如果是 []（空数组），那么这个 useEffect仅在组件的挂载和卸载时执行；如果你想让 useEffect在特定的props或者state改变时执行，就需要将它们列在依赖项数组中。

useEffect清除副作用

在进行副作用操作时，你可能会创建一些需要在组件卸载前清除的资源，例如定时器、订阅等等。clear effect（清效应）的概念就应运而生：

text
useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This will run after 1 second!');
  }, 1000);

  return () => {
    clearTimeout(timer);
    console.log('Cleanup action');
  };
}, []);

总结

综上所述，useEffect 是 React 钩子中不可或缺的一部分，强大而灵活。它为我们提供了在函数组件中进行复杂副作用操作的可能。希望本篇教程能帮助你更好地理解和使用 useEffect。