[文献链接](https://ijpqg5zm8j.feishu.cn/docs/doccnf8zVMcqwwjw6TWz5SnoUmf#hX0qpF

useEffect #

useEffect 传入的回调会在每次渲染生效之后执行。常见的用法有：

1. AJAX 请求
2. 动画效果
3. 触发数据同步

AJAX 请求范例 #

function usePageData(params: { pageIndex?: number; }) {
  const { pageIndex = 1 } = params;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({});

  useEffect(() => {
    let canceled = false; // 用来标记是否异步回调已过期
    setLoading(true)
    fetchData(pageIndex).then((resp) => {
      if (canceled) {
        return;
      }
      setLoading(false);
      setData(resp.data);
    });
    return () => canceled = true;
  }, [pageIndex]);  // 只有在 pageIndex 变更的时候发起请求

  return { loading, data };
}

这个函数以驼峰形式命名，以 use 开头，React 中，这类函数我们称之为 hook 组件。与 Component 组件相比，hook 组件更贴近普通函数，它对于入出参没有任何限制。hook 组件更像是面向过程编程中的一段代码。

useEffect 的第二个参数（通常称之为 dependencies，简称 deps），声明我们只根据 pageIndex 是否变更，来决定 effect 是否执行。通常情况下，我们需要把所有 effect 中用到的闭包变量，添加在 deps 数组中。

useLayoutEffect #

useLayoutEffect 和 useEffect 的传参一致，但有以下区别

1. 执行时机不同。useLayoutEffect 的入参函数会在 react 更新 DOM 树后同步调用。useEffect 为异步调用
2. useLayoutEffect 在 development 模式下 SSR 会有警告⚠️

通常情况下 useLayoutEffect 会用在做动效和记录 layout 的一些特殊场景。一般不需要使用 useLayoutEffect。

useMemo #

useMemo 主要有两个作用：

1. 缓存一些耗时计算，通过声明计算结果的依赖是否变更，来重用上次计算结果
2. 保证引用不变，针对下游使用 React.memo 的组件进行性能优化（useCallback 也有一样的作用）

比如，计算耗时的 fibonacci 数列，就可以用 useMemo 来优化在 n 不变的情况下，二次渲染的性能。

useMemo(() => {
  return fibonacci(props.n)
}, [props.n]);

useCallback #

useCallback 是简化版的 useMemo，方便缓存函数引用。