详解如何在React中优雅的使用addEventListener.docx

第

详解如何在React中优雅的使用addEventListener

目录使用addEventListener代替第三方库的事件方法一：state变化，卸载/绑定事件方法二：使用闭包的方式卸载事件方法三：使用ref保存状态优化state手动维护在ReactHooks中使用第三方库的事件时，很多人会写成这样（指的就是我）：

const[count,setCount]=useState(0);

useEffect(()={

constlibrary=newLibrary();

library.on(click,()={

console.log(count);//拿不到最新的count

},[]);

这样写会有问题：

它只会在这个组件加载时，绑定事件，如果这个事件中用到了其他的state，那么这个状态发生变化时事件中是拿不到最新的state

你会想到，我把state放到依赖项中：

const[count,setCount]=useState(0);

useEffect(()={

constlibrary=newLibrary();

//click事件会重复绑定

library.on(click,()={

console.log(count);

},[count]);

这样做又会有新问题：click事件会重复绑定

这时候你说那我先卸载click事件，在绑定事件：

const[count,setCount]=useState(0);

useEffect(()={

constlibrary=newLibrary();

library.on(click,handleClick);

return()={

//卸载不掉事件，还是会重复绑定

handleClicklibrary.un(click,handleClick);

},[count]);

consthandleClick=()={

console.log(count);

};

你惊奇的发现，居然卸载不掉之前的事件，还是会重复绑定事件。

如何解决这个问题呢？

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

这里使用addEventListener代替第三方库的事件，初始代码

constTest=(props)={

constref=useRef();

const[count,setCount]=useState(0);

useEffect(()={

consthandleClick=(event)={

console.log(clicked);

console.log(count,count);

constelement=ref.current;

element.addEventListener(click,handleClick);

return()={

element.removeEventListener(click,handleClick);

},[]);

constonClickIncrement=()={

setCount(count+1);

return(

h2Test/h2

buttononClickIncrement}点击+1/button

divcount:{count}/div

buttonref={ref}ClickTestButton/button

};

方法一：state变化，卸载/绑定事件

将state放在依赖项中，就要解决state变化时，事件重复绑定的问题

解决事件重复绑定问题，首先想到的是事件卸载

你很容易就会想到这样写

useEffect(()={

handleClickref.current.removeEventListener(click,handleClick);

ref.current.addEventListener(click,handleClick);

},[count]);

consthandleClick=()={

console.log(count);

};

这在ReactHooks中是一个坑，state变化后会handleClick事件