您现在的位置是：首页 >其他 >在react稳定版本中使用useEffectEvent网站首页其他

react 新发布的版本18.2.0 中新增了experimental_useEffectEvent

       useEffectEvent的用法？点这里：Separating Events from Effects – React用于构建 Web 和原生交互界面的库https://zh-hans.react.dev/learn/separating-events-from-effects

但目前experimental_useEffectEvent 还在 建设中，在react的稳定版本中还没办法使用，

官网给的解决方案是，将稳定react 稳定版本升级成实验版本。

我新建了一个项目将react包升级成实验版本后，发现在项目中仍然没法使用，而且还新出来更多的问题，so,项目中别轻易尝试。

 最后的解决方案是：自己写一个 自定义Hook函数 useEffectEvent() 代替，话不多说，上代码：

  useEffectEvent.tsx

import { useRef } from 'react';

export default function useEffectEvent(callback) {
  const fn = useRef(null);

  fn.current = callback;

  return () => {
    fn.current();
  };
}

    Timer.tsx

'use client';
import { useState, useEffect } from 'react';
import useEffectEvent from './useEffectEvent';

export default function Timer() {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState(100);

  const onTick = useEffectEvent(() => {
    setCount((c) => c + 1);
  });

  useEffect(() => {
    const id = setInterval(() => {
      onTick();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay]);

  return (
    <>
      <p>count:{count}</p>
      <p>
        Increment delay:
        <button
          disabled={delay === 100}
          onClick={() => {
            setDelay((d) => d - 100);
          }}
        >
          –100 ms
        </button>
        <b>{delay} ms</b>
        <button
          onClick={() => {
            setDelay((d) => d + 100);
          }}
        >
          +100 ms
        </button>
      </p>
    </>
  );
}

    Timer.tsx 运行截图