函数式编程入门指南：认识useEffect的强大威力

前端

2022-11-17 20:00:33

useEffect：函数式编程的超级工具

简介

useEffect是React中的一个强大钩子函数，它允许我们在函数式组件中执行副作用操作，即对组件外部状态的修改。掌握useEffect对于编写高效且健壮的React应用程序至关重要。

useEffect的双重角色

useEffect有两种主要作用：

组件生命周期管理： useEffect可在组件挂载和卸载时执行代码，用于初始化和清理操作。
状态更新响应： 当组件状态更新时，useEffect可执行额外的操作，例如更新DOM或发送API请求。

初始化二次触发问题

在某些情况下，useEffect会在组件初始化时被触发两次。这是因为React在组件挂载时会先调用useEffect，然后在状态更新时再次调用useEffect。

解决方案：useEffectOnce钩子

为了解决这个问题，我们可以使用一个名为useEffectOnce的自定义钩子函数。useEffectOnce只会在组件初始化时调用一次，不会在状态更新时再次调用。

代码示例：

import { useEffect } from 'react';

const useEffectOnce = (effect, deps) => {
  const isFirstRun = useRef(true);

  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      effect();
    }
  }, deps);
};

依赖数组的用法

useEffect的第二个参数是一个依赖数组，包含useEffect所依赖的变量。当依赖数组中的任何一个变量发生变化时，useEffect就会被重新调用。

通过使用依赖数组，我们可以避免不必要的重新渲染。例如，如果我们有一个组件，它显示一个从API获取数据的列表，那么我们可以使用useEffect在组件挂载时获取数据。

代码示例：

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
};