抛弃类组件，重新认识 useEffect

揭秘：如何用React的两大神器斩断性能瓶颈，让你的应用飞起来！-CSDN博客

很多人对 useEffect 的认识都是从类组件的 compomentDidMount 中转化来的，其实对于现在 react 的生态情况来说，现在接触 react 完全没必要去了解类组件的生命周期，你完成可以抛弃类组件的那一套思想。

随着React的发展，尤其是自从引入Hooks以来，函数组件的能力得到了极大的扩展和增强，使得我们可以更加灵活和简洁地构建组件。useEffect钩子的引入尤其标志着这种转变，它为函数组件提供了执行副作用操作的能力，这在以前是通过类组件的生命周期方法如componentDidMount、componentDidUpdate和componentWillUnmount来实现的。

抛弃类组件的思维模式

对于新接触React的开发者来说，直接学习和掌握函数组件及其Hooks可以说是更为直接和高效的路径。这不仅仅是因为函数组件的语法更为简洁，更重要的是，Hooks提供了一种更加直观和灵活的方式来处理副作用、状态管理、上下文（Context）等，而不必深入了解类组件的生命周期方法。

useEffect与生命周期的映射

useEffect允许我们在函数组件内处理副作用，例如数据请求、订阅或手动更改DOM，这些在类组件中通常在不同的生命周期方法中处理。通过useEffect，我们可以将所有这些副作用放在一个地方，使得代码更为集中和一致。更重要的是，useEffect提供了依赖项数组，让我们有能力精确控制副作用的执行时机，这是类组件生命周期方法难以精确做到的。

现代React的生态

随着时间的推移，React团队和社区都在向Hooks和函数组件的使用倾斜。这不仅反映在官方文档和教程中，也体现在新项目和库的开发中。学习和使用函数组件及其Hooks，意味着紧跟React的最新实践，也更易于在现代React生态中找到相关的资源和社区支持。

import React, { useEffect } from 'react';

function FunctionalComponent() {
  useEffect(() => {
    const handleResize = () => {
      // 处理窗口大小改变
    };
    window.addEventListener('resize', handleResize);
    // 清除副作用
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>查看控制台了解窗口大小变化</div>;
}

上面这个例子，使用了一个 useEffect，第一个参数接收一个函数，并可以返回一个函数。第二个参数是一个依赖项数值，在前面的文章中，我们知道了 react 的每一次更新都是重新执行这个函数，那么当 react 重新执行这个函数的时候遇到 useEffect 时会发生什么呢。

1. 如果是首次执行，那么就将第一个参数的函数保存到一个队列中，等待 react 与浏览器后续的调用（这里展示按下不表，等以后的文章解析），这里还会保存依赖项数组。
2. 如果是后面更新导致的重新执行，都会将第一个参数的函数保存到一个队列中，但是会比较依赖项数组，如果数组不相同了，那么就会添加不同的 tag，这样在后续调用的时候才决定执不执行。
3. 使用useEffect的执行时机，大致能理解为，每一次重新执行函数组件都会去比较依赖项数组，如果数组不一样则执行。那么就很简单了，要执行一次就使用空数值，如果要监听数值变化，就将数值填进依赖数组。

总的来说，对于新手来说，直接学习函数组件和Hooks不仅能够更快速地上手React，也能够更好地适应现代React的开发模式。useEffect和其他Hooks提供的能力完全能够覆盖类组件生命周期方法的使用场景，使得开发者可以用更简洁和现代的方式编写组件。随着React生态的不断进化，抛弃类组件的思维模式，拥抱函数组件和Hooks，无疑是顺应潮流的选择。