usehook - 前端码易

1、概述

1、概述

当我们想要在 useEffect、useLayoutEffect、useInsertionEffect 中执行一段需要访问到最新状态值的逻辑时，我们可以使用 useEffectEvent 来将这段逻辑抽离出来，而无需为副作用添加额外的依赖项

在使用时，我们一定要注意，useEffectEvent 是 React 19.2 中引入的一个全新 API，他的用法比较简单，场景也很单一，仅仅只是为了解决这一个问题而专门设计的 API

因此，我们可以将上一章一分为二的解决方案，使用 useEffectEvent 来代替，完整代码如下所示

预览

0Count

step: 1

正常运行

直接使用 useEffectEvent 来定义定时器回调函数

index.tsx

render-count.tsx

01import { useState, useEffect, useRef, useEffectEvent } from 'react';
02import RenderCount from './render-count';
03
04export default function Counter() {
05  const [count, setCount] = useState(0);
06  const [step, setStep] = useState(1);
07  const stepRef = useRef(1);
08
09  const interval = useEffectEvent(() => {
10    setCount((prevCount) => prevCount + stepRef.current);
11  });
12
13  useEffect(() => {
14    const timer = setInterval(interval, 1000);
15    return () => clearInterval(timer);
16  }, [])
17
18  function setStepValue(value: number) {
19    setStep(value);
20    stepRef.current = value;
21  }
22
23  return (
24    <RenderCount count={count} step={step} setStep={setStepValue} />
25  );
26};

再说闭包陷阱

Context

专栏首页

到顶

专栏目录

Table of Contents

1、概述