前端实现一个简单的下拉列表，大体可以分三部分
1.html的布局
<div className="dropdownlist">
<button onClick={handleClick}>下拉框</button>
<div className={dropDown?"show":"hide"}>
<div>
<ul>
<li>
aaaa
</li>
<li>
bbbb
</li>
<li>
cccc
</li>
</ul>
</div>
</div>
</div>
2.添加点击事件，控制其隐藏显示
const [dropDaown,setDropDaown]=useState(false);
const handleClick = e =>{
e.stopPropagation();// 并非是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。
e.nativeEvent.stopImmediatePropagation();//可以阻止原生事件绑定到document上的冒泡。React对原生事件封装，提供了很多好东西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活。
setDropDown(!dropDown);
}
3.给document 添加监听事件，隐藏下拉框
如果是class 类的component的话，可以将监听事件放在componentDidMount钩子函数中，移除监听放在componentwillUnMount钩子函数中。但是在hook中只有一个副作用，如何实现呢。如下，如有不对，请多多指教。
useEffect(()=>{
docoument.addEventListener('click',handleClickClose);
return ()=>{
docoument.removeEventListener('click',handleClickClose);
}
},[])
const handleClickClose = () =>{
setDropDown(!dropDown);
}
总结，其实本文重点是在react hook中如何去绑定原生事件监听和移除事件监听，以及如何阻止原生事件冒泡，阻止原生事件的冒泡必须使用e.nativeEvent.stopImmediatePropagation()方法，否则无法阻止。