理解React useEffectEvent：解决useEffect依赖问题的新方法

react的useEffectEvent是一个比较新的api，它专门用来解决useEffect中的依赖项问题。学习这个API需要一些理解成本，但掌握后能让你的代码更加清晰。

为什么需要useEffectEvent？

要理解useEffectEvent，先要了解React官方的一个建议：在useEffect中使用到的所有state和props都应该作为依赖项列出。

ESLint规则也会强制我们这样做，否则会给出警告。但在实际项目中，我们常常会忽略这些警告，因为：

有些依赖项变化时，我们确实需要重新执行useEffect
有些依赖项变化时，我们不希望重新执行useEffect

第二种情况就容易引发问题。过去，我们只能小心翼翼地设计useEffect的依赖项来避免这些问题。

理解闭包陷阱

先看一个具体的例子：

import { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + increment);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, []); // 空依赖数组

  function incrementHandler() {
    setIncrement(i => i + 1);
  }

  function decrementHandler() {
    setIncrement(i => i - 1);
  }

  return (
    <div>
      <div>计数: {count}</div>
      <div>增量: {increment}</div>
      <button onClick={incrementHandler}>增加增量</button>
      <button onClick={decrementHandler}>减少增量</button>
    </div>
  );
}

这个计时器每秒增加count的值，增量由increment状态控制。但这里有个问题：当我们点击按钮改变increment时，计时器仍然使用初始的increment值（1），而不是最新的值。

这就是闭包陷阱。

为什么会这样？

组件函数和setInterval回调函数都使用了increment变量，形成了闭包。由于useEffect的依赖数组是空的，其中的回调函数在初始化后就被缓存，后续渲染中使用的都是最初捕获的increment值。

常规解决方案

最简单的解决办法是把increment加入依赖数组：

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + increment);
  }, 1000);
  return () => {
    clearInterval(id);
  };
}, [increment]); // 添加increment作为依赖

这样每次increment变化时，useEffect都会重新执行，使用最新的increment值。

新问题出现

但这种方法带来了新问题：我们原本不希望increment变化时重新执行useEffect。快速点击增减按钮时，计时器会不断重启，计数器的变化会暂停，这不符合我们的预期。

区分状态值和逻辑值

要理解更好的解决方案，需要先分清两种值：

状态值：驱动UI变化的值，用useState定义
逻辑值：参与逻辑运算但不直接驱动UI的值，用useRef定义

当某个值既是状态值又是逻辑值时，就容易出现闭包陷阱。上面的increment就是这种情况：它既要显示在UI上（状态值），又要参与计时器的逻辑计算（逻辑值）。

传统解决方案

过去我们会把这个值拆分成两个：

import { useState, useEffect, useRef } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1); // 状态值
  const incrementRef = useRef(1); // 逻辑值

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + incrementRef.current); // 使用ref
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, []); // 空依赖数组

  function incrementHandler() {
    setIncrement(i => i + 1); // 更新状态值
    incrementRef.current += 1; // 同步更新逻辑值
  }

  function decrementHandler() {
    setIncrement(i => i - 1);
    incrementRef.current -= 1;
  }

  return (
    <div>
      <div>计数: {count}</div>
      <div>增量: {increment}</div> {/* 显示状态值 */}
      <button onClick={incrementHandler}>增加增量</button>
      <button onClick={decrementHandler}>减少增量</button>
    </div>
  );
}

这种方法能解决问题，但理解起来比较抽象，需要维护两个同步的值。

useEffectEvent的解决方案

useEffectEvent提供了更直观的解决方案：

import { useState, useEffect, useEffectEvent } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1);
  
  // 使用useEffectEvent定义事件处理函数
  const incrementEvent = useEffectEvent(() => {
    setCount(c => c + increment);
  });

  useEffect(() => {
    const id = setInterval(incrementEvent, 1000);
    return () => clearInterval(id);
  }, []); // 空依赖数组，不需要包含increment

  function incrementHandler() {
    setIncrement(i => i + 1);
  }

  function decrementHandler() {
    setIncrement(i => i - 1);
  }

  return (
    <div>
      <div>计数: {count}</div>
      <div>增量: {increment}</div>
      <button onClick={incrementHandler}>增加增量</button>
      <button onClick={decrementHandler}>减少增量</button>
    </div>
  );
}

useEffectEvent的优势：

代码更清晰：不需要拆分状态，逻辑更集中
自动处理最新值：在useEffectEvent回调中总能访问到最新的状态
依赖项更简洁：useEffect的依赖数组保持简洁

使用useEffectEvent的注意事项

使用范围：useEffectEvent主要用在effects内部，不要在effects外部调用
适用场景：最适合处理那些既是状态值又是逻辑值的情况
纯逻辑值：如果值只用于逻辑计算，不驱动UI，应该使用useRef

实际应用场景

场景1：事件监听

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const handleSearch = useEffectEvent(() => {
    if (query.trim()) {
      searchAPI(query).then(setResults);
    }
  });
  
  useEffect(() => {
    const timer = setTimeout(handleSearch, 300);
    return () => clearTimeout(timer);
  }, [query]); // 只需要query作为依赖
}

场景2：WebSocket连接

function ChatRoom() {
  const [messages, setMessages] = useState([]);
  const [user, setUser] = useState(null);
  
  const handleMessage = useEffectEvent((newMessage) => {
    if (user && newMessage.userId !== user.id) {
      setMessages(prev => [...prev, newMessage]);
    }
  });
  
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    ws.onmessage = (event) => {
      handleMessage(JSON.parse(event.data));
    };
    return () => ws.close();
  }, []); // 空依赖，不需要包含user
}

总结

useEffectEvent是React为解决useEffect依赖问题提供的新工具。它让代码更清晰，减少了手动处理闭包陷阱的复杂度。

关键要点：

使用useEffectEvent包装那些需要在effect中使用但不应作为依赖的值
在useEffectEvent回调中总能访问到最新的状态
保持useEffect依赖数组的简洁性

虽然这个API还在实验阶段，但它代表了React在改善开发者体验方面的持续努力。掌握它能让你的React代码更加健壮和易维护。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13059