React的闭包陷阱

在最近的面试中，被问到了React的闭包陷阱，一时间没想到这个名词对应的场景，只知道hooks在底层实现的时候，会借助闭包来管理自己的内部状态。

后面百度了一下React的闭包陷阱，发现这个现象其实在工作里遇到过很多次了，但是面试的时候并不知道这个现象对应的名词是闭包陷阱，有点可惜

React 中的闭包陷阱是指在使用函数组件时，特别是在使用 useState 或 useEffect 这类 React Hook 时可能会遇到的一个常见问题。这个问题通常涉及到闭包的作用域和 JavaScript 中的变量引用机制。

问题描述

当在函数组件中使用 useState 或 useEffect 时，经常会在回调函数中访问组件的状态或者 props。例如：

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，useEffect 中的回调函数依赖于 count 这个状态变量。每次 count 更新时，useEffect 会更新 document.title，以反映当前的点击次数。

闭包陷阱

问题出现在 handleClick 函数中。handleClick 函数使用了 setCount(count + 1)，看起来似乎会使 count 增加，然后触发重新渲染组件，并在 useEffect 中更新 document.title。然而，实际上，这种写法会导致一个常见的陷阱。

分析

在 JavaScript 中，函数的闭包捕获了在其定义时可访问的变量。这意味着 handleClick 函数在定义时捕获了 count 的当前值（在 setCount 被调用之前的值），而不是每次函数执行时 count 的最新值。

因此，当点击按钮时，handleClick 函数中的 count 仍然是点击按钮之前的值。这导致了 setCount(count + 1) 无法正确地递增 count 的值。

解决方法

为了解决这个问题，需要确保在更新状态时使用最新的 count 值。React 提供了一种方法来处理这种情况，即使用函数形式的更新，而不是直接使用 count 的值。

修改 handleClick 函数如下：

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

通过这种方式，setCount 接受一个函数作为参数，这个函数会接收当前的状态值作为参数，返回新的状态值。这样做的好处是，React 保证在调用该函数时，会使用最新的状态值，而不需要依赖于当前作用域中的变量。

总结

React 中的闭包陷阱是由于函数组件中的作用域和变量引用机制导致的常见问题。为了避免这种问题，特别是在使用 React Hook 时，应该采用函数形式的状态更新，而不是直接引用当前作用域中的变量。这种做法可以确保在更新状态时使用最新的值，避免潜在的 bug 和不一致性。