问题记录-记一次 react hooks 闭包陷阱

发布于 2022-01-07
约 2 分钟

出现闭包陷阱的场景

  • 函数里面更新 state 同时使用了 state
    const [val, setVal] = useState(0)
    const fn0 = () => {
      saveLatestVal(val)
    }
    const fn1 = () => {
      setVal(1)
      fn0()
    }
  • 有异步，多次变更复杂 state 时
const handleClick = async (key) => {
	setLoadingMap({ ...loadingMap, [key]: true });
	await delay(3000);
	setLoadingMap({ ...loadingMap, [key]: false });
};

解决方案

  • 使用 useRef，ref 具有穿透性
  • 用 useEffect，例如在嵌套函数里变更另一个 state，在 useEffect 里执行 saveLatestVal
    const [val, setVal] = useState(0)
    const [version, setVersion] = useState(0)
    const fn0 = () => {
      setVersion(1)
    }
    const fn1 = () => {
      setVal(1)
      fn0()
    }
    useEffect(() => saveLatestVal(val), [version])
  • 使用 useReducer，分离 state，对异步，多次变更复杂 state 时
const handleClick = async (key) =>
	dispatch({ [key]: true });
	await delay(3000);
	dispatch({ [key]: false });
};

本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！