日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

useBoolean 和 useToggle

這兩個(gè)都是特殊情況下的值管理。

useBoolean，優(yōu)雅的管理 boolean 狀態(tài)的 Hook。

useToggle，用于在兩個(gè)狀態(tài)值間切換的 Hook。

實(shí)際上，useBoolean 又是 useToggle 的一個(gè)特殊使用場(chǎng)景。

先看 useToggle。

• 這里使用了 typescript 函數(shù)重載聲明入?yún)⒑统鰠㈩?lèi)型，根據(jù)不同的入?yún)?huì)返回不同的結(jié)果。比如第一個(gè)入?yún)?boolean 布爾值，則返回一個(gè)元組，第一項(xiàng)為 boolean 值，第二個(gè)為更新函數(shù)。優(yōu)先級(jí)從上到下依次變低。
• 入?yún)⒖赡苡袃蓚€(gè)值，第一個(gè)為默認(rèn)值（認(rèn)為是左值），第二個(gè)是取反之后的值（認(rèn)為是右值），可以不傳，不傳的時(shí)候，則直接根據(jù)默認(rèn)值取反!defaultValue。
• toggle 函數(shù)。切換值，也就是上面的左值和右值的轉(zhuǎn)換。
• set。直接設(shè)置值。
• setLeft。設(shè)置默認(rèn)值（左值）。
• setRight。如果傳入了 reverseValue, 則設(shè)置為 reverseValue。否則設(shè)置為 defautValue 的取反值。

// TS 函數(shù)重載的使用
function useToggle(): [boolean, Actions];

function useToggle(defaultValue: T): [T, Actions];

function useToggle(defaultValue: T, reverseValue: U): [T | U, Actions];

function useToggle(
  // 默認(rèn)值
  defaultValue: D = false as unknown as D,
  // 取反
  reverseValue?: R,
) {
  const [state, setState] = useState(defaultValue);

  const actions = useMemo(() => {
    const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R;

    // 切換 state
    const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));
    // 修改 state
    const set = (value: D | R) => setState(value);
    // 設(shè)置為 defaultValue
    const setLeft = () => setState(defaultValue);
    // 如果傳入了 reverseValue, 則設(shè)置為 reverseValue。 否則設(shè)置為 defautValue 的反值
    const setRight = () => setState(reverseValueOrigin);

    return {
      toggle,
      set,
      setLeft,
      setRight,
    };
    // useToggle ignore value change
    // }, [defaultValue, reverseValue]);
  }, []);

  return [state, actions];
}

而 useBoolean 是對(duì) useToggle 的一個(gè)使用。如下，比較簡(jiǎn)單，不細(xì)說(shuō)

export default function useBoolean(defaultValue = false): [boolean, Actions] {
  const [state, { toggle, set }] = useToggle(defaultValue);

  const actions: Actions = useMemo(() => {
    const setTrue = () => set(true);
    const setFalse = () => set(false);
    return {
      toggle,
      set: (v) => set(!!v),
      setTrue,
      setFalse,
    };
  }, []);

  return [state, actions];
}

usePrevious

保存上一次狀態(tài)的 Hook。

其原理，是每次狀態(tài)變更的時(shí)候，比較值有沒(méi)有發(fā)生變化，變更狀態(tài)：

• 維護(hù)兩個(gè)狀態(tài) prevRef（保存上一次的狀態(tài)）和 curRef（保存當(dāng)前狀態(tài)）。
• 狀態(tài)變更的時(shí)候，使用 shouldUpdate 判斷是否發(fā)生變化，默認(rèn)通過(guò)Object.is 判斷。開(kāi)發(fā)者可以自定義 shouldUpdate 函數(shù)，并決定什么時(shí)候記錄上一次狀態(tài)。
• 狀態(tài)發(fā)生變化，更新 prevRef 的值為上一個(gè) curRef，并更新 curRef 為當(dāng)前的狀態(tài)。

const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b);
function usePrevious(
  state: T,
  shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate,
): T | undefined {
  // 使用了 useRef 的特性，一直保持引用不變
  // 保存上一次值
  const prevRef = useRef();
  // 當(dāng)前值
  const curRef = useRef();

  // 自定義是否更新上一次的值
  if (shouldUpdate(curRef.current, state)) {
    prevRef.current = curRef.current;
    curRef.current = state;
  }

  return prevRef.current;
}

useRafState

只在 requestAnimationFrame callback 時(shí)更新 state，一般用于性能優(yōu)化。

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫(huà)，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫(huà)。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。

假如你的操作是比較頻繁的，就可以通過(guò)這個(gè) hook 進(jìn)行性能優(yōu)化。

• 重點(diǎn)看 setRafState 方法，它執(zhí)行的時(shí)候，會(huì)取消上一次的 setRafState 操作。重新通過(guò) requestAnimationFrame 去控制 setState 的執(zhí)行時(shí)機(jī)。
• 另外在頁(yè)面卸載的時(shí)候，會(huì)直接取消操作，避免內(nèi)存泄露。

function useRafState(initialState?: S | (() => S)) {
  const ref = useRef(0);
  const [state, setState] = useState(initialState);

  const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
    cancelAnimationFrame(ref.current);
    ref.current = requestAnimationFrame(() => {
      setState(value);
    });
  }, []);

  // unMount 的時(shí)候，去除監(jiān)聽(tīng)
  useUnmount(() => {
    cancelAnimationFrame(ref.current);
  });

  return [state, setRafState] as const;
}

useSafeState

function useSafeState(initialState?: S | (() => S)) {
  // 判斷是否卸載
  const unmountedRef = useUnmountedRef();
  const [state, setState] = useState(initialState);
  const setCurrentState = useCallback((currentState) => {
    // 如果組件卸載，則停止更新
    if (unmountedRef.current) return;
    setState(currentState);
  }, []);

  return [state, setCurrentState] as const;
}

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false;
    // 如果已經(jīng)卸載，則會(huì)執(zhí)行 return 中的邏輯
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

function useGetState(initialState?: S) {
  const [state, setState] = useState(initialState);
  // useRef 返回一個(gè)可變的 ref 對(duì)象，其 .current 屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)持續(xù)存在。
  // 使用 useRef 處理 state
  const stateRef = useRef(state);
  stateRef.current = state;
  const getState = useCallback(() => stateRef.current, []);

  return [state, setState, getState];
}

const [count, setCount, getCount] = useGetState(0);

useEffect(() => {
  const interval = setInterval(() => {
    console.log('interval count', getCount());
  }, 3000);

  return () => {
    clearInterval(interval);
  };
}, []);