useRafState

在 requestAnimationFrame 更新狀態。

Usage

即時編輯器

function Demo() {
  const [state, setState] = useRafState({ x: 0, y: 0 });

  useMount(() => {
    const onMouseMove = (event: MouseEvent) => {
      setState({ x: event.clientX, y: event.clientY });
    };
    const onTouchMove = (event: TouchEvent) => {
      setState({
        x: event.changedTouches[0].clientX,
        y: event.changedTouches[0].clientY,
      });
    };

    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onTouchMove);

    return () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("touchmove", onTouchMove);
    };
  });

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};

結果

Loading...

API

useRafState

Returns

readonly [S, React.Dispatch<React.SetStateAction<S>>]: 包含以下元素的元組：

• state 的當前值。
• 在 requestAnimationFrame 中更新 state 值的函數。

Arguments

參數名	描述	類型	預設值
initialState	状态值	S | (() => S) (必填)	-