在React的useEffect中使用ref回调时应避开的陷阱

前端

2022-12-23 17:31:55

useEffect 钩子中的 ref 回调：小心使用！

在 React 的世界中，useEffect 钩子是一位强大的盟友，它让我们能够在组件的生命周期中处理副作用，例如更新 DOM 或发起网络请求。然而，当我们试图在 useEffect 中使用 ref 回调时，可能会遇到一些坑洼。

ref 回调的棘手之处

ref 回调本质上是在组件渲染完成后执行的，这意味着如果你想在 useEffect 中使用它来更新 DOM 元素的样式，这些更新将在下一次渲染发生时才生效。这可能会导致一些令人沮丧的闪烁和延迟。

更棘手的是，ref 回调也将在组件卸载前执行，这意味着如果你在 useEffect 中添加了事件监听器，这些监听器将在组件消失时被移除。这会导致意想不到的行为和难以追踪的错误。

避免 ref 回调陷阱

为了避免这些陷阱，最好尽量避免在 useEffect 中使用 ref 回调。如果你真的需要在 useEffect 中使用它们，那就包裹一个 useCallback 钩子，它可以让你创建一个缓存函数，不受组件重新渲染的影响。

使用 useCallback 包裹 ref 回调

让我们用一个示例来说明如何使用 useCallback：

const MyComponent = () => {
  const ref = useRef();

  const handleClick = useCallback(() => {
    if (ref.current) {
      ref.current.focus();
    }
  }, [ref]);

  useEffect(() => {
    if (ref.current) {
      ref.current.addEventListener('click', handleClick);
    }

    return () => {
      if (ref.current) {
        ref.current.removeEventListener('click', handleClick);
      }
    };
  }, [ref, handleClick]);

  return (
    <input ref={ref} type="text" />
  );
};