React自定义hook绑定click事件监听器调用组件函数仅取初始state如何解决

你遇到的是React经典的闭包陷阱问题：

• 组件首次渲染时，customFunction会捕获当前的初始state，作为参数传入useCustomHook后，你直接给DOM绑定了引用这个初始函数的事件监听
• 后续组件因state更新重渲染时，会生成新的customFunction（捕获了最新的state），但你没有更新DOM上绑定的事件监听，触发时永远调用的是首次渲染传入的旧函数，所以只能拿到初始state值

下面是几种常用的修复方案：

方案1：自定义hook内添加依赖更新+清理逻辑 #

在自定义hook中使用useEffect监听传入的函数变化，每次函数更新时先解绑旧的事件监听，再绑定新的，同时组件卸载时自动清理监听，避免内存泄漏。

import { useEffect } from 'react';

const useCustomHook = (functionDefinedInComponent, item) => {
  // logic to get the dom element
  useEffect(() => {
    const handler = () => functionDefinedInComponent(item);
    element.addEventListener('click', handler);
    // 清理函数：依赖变化/组件卸载时移除旧监听
    return () => {
      element.removeEventListener('click', handler);
    };
  }, [functionDefinedInComponent, item]); // 所有用到的变量都要加入依赖数组
};

如果组件内的customFunction没有用useCallback包裹，每次重渲染都会生成新的函数导致事件频繁解绑绑定，可以配合组件内useCallback优化：

// CustomComponent 内修改customFunction定义
import { useCallback } from 'react';

const customFunction = useCallback((item) => {
  setState(prevState => {
    // 如果需要用到旧state计算新值，用函数式更新
    // 其他使用state的逻辑写在这里
    return newState;
  });
}, []); // 把函数内用到的所有外部变量加入依赖数组

方案2：用ref缓存最新函数，无需重复绑定事件 #

如果不想频繁操作事件监听，可以用useRef存储最新的传入函数，事件监听固定调用ref指向的最新函数即可：

import { useEffect, useRef } from 'react';

const useCustomHook = (functionDefinedInComponent, item) => {
  // logic to get the dom element
  const funcRef = useRef(functionDefinedInComponent);
  // 每次渲染更新ref为最新的函数
  funcRef.current = functionDefinedInComponent;

  useEffect(() => {
    const handler = () => funcRef.current(item);
    element.addEventListener('click', handler);
    return () => element.removeEventListener('click', handler);
  }, [item]); // 仅需把item加入依赖，函数更新不需要重新绑事件
};

这个方案性能更高，不需要组件侧配合修改customFunction，适配性更强。

方案3：仅需要更新state时用函数式setState #

如果customFunction内只需要修改state，不需要读取最新state做其他逻辑，直接使用setState的函数式写法即可避开闭包问题：

const customFunction = (item) => {
  setState(prevState => {
    // prevState永远是最新的state值，不需要依赖外部的state变量
    const newState = /* 基于prevState和item计算新state */;
    return newState;
  });
};

内容的提问来源于stack exchange，提问作者Ghost