useRafFn

在每一帧 requestAnimationFrame 上执行回调函数。

Usage

实时编辑器

function Demo() {
  const [ticks, setTicks] = useState(0);
  const [lastCall, setLastCall] = useState(0);
  const update = useUpdate();

  const [loopStop, loopStart, isActive] = useRafFn((time) => {
    setTicks(ticks => ticks + 1);
    setLastCall(time);
  });

  return (
    <div>
      <div>RAF triggered: {ticks} (times)</div>
      <div>Last high res timestamp: {lastCall}</div>
      <br />
      <button
        onClick={() => {
          isActive() ? loopStop() : loopStart();
          update();
        }}
      >
        {isActive() ? "STOP" : "START"}
      </button>
    </div>
  );
};

结果

Loading...

API

useRafFn

Returns

readonly [() => void, () => void, () => boolean]: 包含以下元素的元组：

• 停止函数。
• 开始函数。
• 函数是否在执行中。

Arguments

参数名	描述	类型	默认值
callback	回调	FrameRequestCallback (必填)	-
initiallyActive	立即执行	boolean | undefined	-