但在組合使用 useEffect，useReducer，React.memo 時(shí)，發(fā)生了組件在狀態(tài)未發(fā)生變化時(shí)觸發(fā)渲染，因?yàn)榇藙?dòng)作發(fā)生在 mousemove 鼠標(biāo)移動(dòng)時(shí)，所以組件不必要渲染次數(shù)非常多。

自定義 Hooks 簡單實(shí)現(xiàn)

import { useReducer } from "react";
const reducer = (state, action) => {
  const { sliding, lastPos, ratio } = state;
  switch (action.type) {
    case "start":
      return {
        ...state,
        slideRange: action.slideRange,
        lastPos: action.x,
        sliding: true,
      };
    case "move":
      if (!sliding) {
        return state;
      }
      const offsetX = action.x - lastPos;
      const newRatio = ratio + offsetX / state.slideRange;
      if (newRatio > 1 || newRatio < 0) {
        return state;
      }
      return {
        ...state,
        lastPos: action.x,
        ratio: newRatio,
      };
    case "end":
      if (!sliding) {
        return state;
      }
      return {
        ...state,
        sliding: false,
      };
    case "updateRatio":
      return {
        ...state,
        ratio: action.ratio,
      };
    default:
      return state;
  }
};
export function useSlider(initialState) {
    const [state, dispatch] = useReducer(reducer, initialState);
    return [state, dispatch];
}

在組件中使用自定義 Hooks

const [state, dispatch] = useSlider(initialState);
  const { ratio, sliding, lastPos, slideRange } = state;
  useEffect(() => {
    const onSliding = (e) => {
      dispatch({ type: "move", x: e.pageX });
    };
    const onSlideEnd = () => {
      dispatch({ type: "end" });
    };
    document.addEventListener("mousemove", onSliding);
    document.addEventListener("mouseup", onSlideEnd);
    return () => {
      document.removeEventListener("mousemove", onSliding);
      document.removeEventListener("mouseup", onSlideEnd);
    };
  }, [dispatch]);
  const handleThumbMouseDown = useCallback(
    (event) => {
      const hotArea = hotAreaRef.current;
      dispatch({
        type: "start",
        x: event.pageX,
        slideRange: hotArea.clientWidth,
      });
      if (event.target.className !== "point") {
        dispatch({
          type: "updateRatio",
          ratio: (event.pageX - 30) / hotArea.clientWidth,
        });
      }
    },
    [dispatch]
  );

鼠標(biāo)每次移動(dòng)，都會(huì)觸發(fā) dispatch({ type: "move", x: e.pageX })，在 reducer 函數(shù)中，當(dāng) !sliding 時(shí)，不修改 state 數(shù)據(jù)原樣返回，但是組件仍然進(jìn)行了渲染。

提前阻止 dispatch 觸發(fā)

將 sliding 判斷移動(dòng)到 useEffect 中，提前阻止 dispatch 觸發(fā)，并將 sliding 設(shè)置到 useEffect(fn, deps) deps 中，保證監(jiān)聽函數(shù)中能取到 sliding 最新值。

useEffect(() => {
    const onSliding = (e) => {
      if(!sliding) {
        return;
      }
      dispatch({ type: "move", x: e.pageX });
    };
    const onSlideEnd = () => {
      if (!sliding) {
        return;
      }
      dispatch({ type: "end" });
    };
    document.addEventListener("mousemove", onSliding);
    document.addEventListener("mouseup", onSlideEnd);
    return () => {
      document.removeEventListener("mousemove", onSliding);
      document.removeEventListener("mouseup", onSlideEnd);
    };
  }, [sliding]);

優(yōu)化后再測試

鼠標(biāo)僅移動(dòng)時(shí)，sliding 為 false，直接 return，不會(huì)觸發(fā) dispatch 動(dòng)作。

好處

避免了組件在 state 未修改時(shí)不必要渲染。

壞處

部分處理邏輯被移動(dòng)到使用自定義 hooks 的組件中，sliding 數(shù)據(jù)改變時(shí)，add EventListener函數(shù)會(huì)重新注冊。

結(jié)論

不能為了不在 useEffect(fn, deps) 設(shè)置 deps，使用 useReducer，并把所有數(shù)據(jù)變更都放在 reducer 中。本篇文章通過把不修改 reducer state 的動(dòng)作提前阻止，避免使用此自定義 hooks 的組件發(fā)生不必要渲染，提高代碼復(fù)用性的同時(shí)也兼顧了組件性能。

題外

React.memo 對 props 進(jìn)行淺比較，一種組件性能優(yōu)化方式
useCallback(fn, deps) 緩存函數(shù)
useMemo(() => fn, deps) 緩存昂貴變量
useState(initialState)惰性初始state，initialState` 只會(huì)在組件初始渲染中起作用，后續(xù)渲染時(shí)會(huì)被

參考文獻(xiàn)

React 官方文檔

以上就是React Hooks 之 useReducer 逃避deps后增加組件渲染次數(shù)的陷阱的詳細(xì)內(nèi)容，更多關(guān)于React Hooks useReducer組件渲染的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: