useImperativeHandle 防止被闭包

[981377660LMT]

• 闭包问题是什么? 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常见的方式就是在一个函数内部创建另一个函数。

  在JavaScript中，如果一个变量在函数中定义，那么它可能会在函数执行完毕后被垃圾回收，不再可用。但是，如果存在一个闭包引用了这个变量，那么这个变量就会一直存在，直到没有任何闭包引用它为止。

  在React的hooks中，闭包问题通常表现为旧的state或props的值被捕获。例如，在useEffect或setTimeout的回调函数中，你可能会发现它们捕获了旧的state或props的值，而不是最新的值。这是因为当这些回调函数被定义时，它们捕获了那时的环境状态，包括state和props的值。

  解决这个问题的一种方法是使用useRef，它创建的对象在组件的整个生命周期内保持不变，因此总是能获取到最新的值。

• 问题：useImperativeHandle 中，date 变量被闭包，导致获取到的state总是上一次更新的state, 无法实时获取值

  const [date, setDate] = useState<number>(isValidDate(value) ? value : startOfDay);
  useImperativeHandle(
  methodRef,
  () => ({
    setToday,
    setTomorrow
  }),
  [date]
  );

[981377660LMT]

解法1：使用 useStatefulRef （非常安全）

function useStatefulRef<T> (initialValue: T): [React.MutableRefObject<T>, (newValue: T) => void] {
  const valueRef = useRef(initialValue);
  const [, setState] = useState(initialValue);
  const setStateWithoutClosure = (newValue: T) => {
    valueRef.current = newValue;
    setState(newValue);
  };
  return [valueRef, setStateWithoutClosure];
}

[981377660LMT]

解法2：将函数传递给setState来解决闭包问题 (有局限性)

this.setState((prevState) => {
  return {counter: prevState.counter + 1};
});

传递了一个函数给setState，这个函数接收前一个状态prevState作为参数，并返回一个新的状态。这样，我们就可以确保每次都是基于最新的状态进行更新，避免了闭包问题。

但是，需要注意的是，这种方法只能解决状态更新的闭包问题，对于其他类型的闭包问题（如在useEffect或setTimeout中捕获旧的props或state值），还需要其他的解决方法，如使用useRef。