詳解如何在React中優(yōu)雅的使用addEventListener

更新時間：2023年01月31日 10:25:51 作者：uccs

這篇文章主要為大家詳細介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對大家學(xué)習(xí)React有一定的幫助，需要的可以參考一下

const [count, setCount] = useState(0);
useEffect(() => {
  const library = new Library();
  library.on("click", handleClick);
  return () => {
    // 卸載不掉事件，還是會重復(fù)綁定
    handleClick && library.un("click", handleClick);
  };
}, [count]);

const handleClick = () => {
  console.log(count);
};

你驚奇的發(fā)現(xiàn)，居然卸載不掉之前的事件，還是會重復(fù)綁定事件。

如何解決這個問題呢？

使用 addEventListener 代替第三方庫的事件

這里使用 addEventListener 代替第三方庫的事件，初始代碼

const Test = (props) => {
  const ref = useRef();
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleClick = (event) => {
      console.log("clicked");
      console.log("count", count);
    };
    const element = ref.current;
    element.addEventListener("click", handleClick);
    return () => {
      element.removeEventListener("click", handleClick);
    };
  }, []);

  const onClickIncrement = () => {
    setCount(count + 1);
  };
  return (
    <>
      <h2>Test</h2>
      <button onClick={onClickIncrement}>點擊 +1</button>
      <div>count: {count}</div>
      <button ref={ref}>Click Test Button</button>
    </>
  );
};

方法一：state 變化，卸載/綁定事件

將 state 放在依賴項中，就要解決 state 變化時，事件重復(fù)綁定的問題

解決事件重復(fù)綁定問題，首先想到的是事件卸載

你很容易就會想到這樣寫

useEffect(() => {
  handleClick && ref.current.removeEventListener("click", handleClick);
  ref.current.addEventListener("click", handleClick);
}, [count]);

const handleClick = () => {
  console.log(count);
};

這在 React Hooks 中是一個坑，state 變化后會 handleClick 事件函數(shù)會重新聲明，新的 handleClick 和之前的 handleClick 不是一個事件函數(shù)，導(dǎo)致 removeEventListener 移除的事件函數(shù)不是之前的事件函數(shù)

那你又會想到，我給 handleClick 加個 useCallback

useEffect(() => {
  handleClick && ref.current.removeEventListener("click", handleClick);
  ref.current.addEventListener("click", handleClick);
}, [count]);

const handleClick = useCallback(() => {
  console.log(count);
}, []);

這樣寫的話還是會有同一個問題：依賴項為空數(shù)組，就拿不到最新的 state；依賴項中放入 state，state 變化后就不是同一個事件函數(shù)了，無法移除事件

如何解決這個問題呢？

把事件函數(shù)保存為狀態(tài):

當(dāng) count 變化時，掛載事件，同時將事件函數(shù)保存為 state
當(dāng) eventFn.fn 變化時，在 useEffect return 中卸載之前的事件函數(shù)（這里利用的是閉包）

具體的代碼：

const Test = () => {
  const ref = useRef();
  const [count, setCount] = useState(0);
  const [eventFn, setEventFn] = useState({ fn: null });

  useEffect(() => {
    mountEvent();
  }, [count]);

  const mountEvent = () => {
    if (!ref.current) return;
    //  eventFn.fn && ref.current.removeEventListener("click", eventFn.fn);  // 下面看不懂的話，也可以這樣寫
    ref.current.addEventListener("click", handleClick);
    setEventFn({ fn: handleClick });
  };

  useEffect(() => {
    return () => {
      eventFn.fn && ref.current.removeEventListener("click", eventFn.fn); // 這里用的是閉包，和上面注釋部分任選其一
    };
  }, [eventFn.fn]);

  const handleClick = () => {
    console.log(count);
  };

  const onClickIncrement = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>Test</h2>
      <button onClick={onClickIncrement}>點擊 +1</button>
      <div>count: {count}</div>
      <button ref={ref}>Click Test Button</button>
    </>
  );
};

方法二：使用閉包的方式卸載事件

利用閉包，可以將方法一簡化

const Test = () => {
  const ref = useRef();
  const [count, setCount] = useState(0);

  useEffect(() => {
    const element = ref.current;
    element.addEventListener("click", handleClick);
    return () => {
      element.removeEventListener("click", handleClick);
    };
  }, [count]);

  const handleClick = () => {
    console.log(count);
  };

  const onClickIncrement = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>Test</h2>
      <button onClick={onClickIncrement}>點擊 +1</button>
      <div>count: {count}</div>
      <button ref={ref}>Click Test Button</button>
    </>
  );
};

useEffect return 中的變量用的是閉包，這點剛開始學(xué)的時候不好理解

方法三：使用 ref 保存狀態(tài)

ref 保存的數(shù)據(jù)雖然不能用于頁面渲染，但可以作為 state 備份，在 state 變化時更新 ref

在事件函數(shù)中就能拿到最新的 stateRef

const Test = () => {
  const ref = useRef();
  const [count, setCount] = useState(0);

  const countRef = useRef(count);
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const element = ref.current;
    element.addEventListener("click", handleClick);
  }, []);

  const handleClick = () => {
    console.log(countRef.current);
  };

  const onClickIncrement = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>Test</h2>
      <button onClick={onClickIncrement}>點擊 +1</button>
      <div>count: {count}</div>
      <button ref={ref}>Click Test Button</button>
    </>
  );
};

優(yōu)化 state 手動維護

上面三種方法，都有個問題，state 需要手動維護

這一步如何優(yōu)化呢？

方法一和方法二，優(yōu)化的方式都一樣：將依賴項是 count 改為 state

const [state, setState] = useState({ count: 0 });

useEffect(() => {
  // ...
}, [state]);

方法三的優(yōu)化是，用 stateRef 保存 ref 對象，當(dāng) state 變化時，遍歷 state 給 stateRef 賦值

事件函數(shù)中使用 stateRef

const [state, setState] = useState({ count: 0 });
const stateRef = useRef({});
useEffect(() => {
  Object.keys(state).forEach((key) => {
    stateRef.current[key] = state[key];
  });
}, [state]);

到此這篇關(guān)于詳解如何在React中優(yōu)雅的使用addEventListener的文章就介紹到這了,更多相關(guān)React addEventListener內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: