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 觸發次數：{ticks} (次)</div>
      <div>最後高精度時間戳：{lastCall}</div>
      <br />
      <button
        onClick={() => {
          isActive() ? loopStop() : loopStart();
          update();
        }}
      >
        {isActive() ? "停止" : "開始"}
      </button>
    </div>
  );
};

結果

RAF 觸發次數：138 (次)

最後高精度時間戳：2970.7

API

useRafFn

Returns

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

• 停止函數。
• 開始函數。
• 函數是否在執行中。

Arguments

參數名	描述	類型	預設值
callback	回调	FrameRequestCallback (必填)	-
initiallyActive	立即执行	boolean | undefined	-