大佬，怎么办？升级React17，Toast组件不能用了

大家好，我是卡颂，人称卡尔摩斯。

成都创新互联公司云计算的互联网服务提供商,拥有超过13年的服务器租用、服务器托管、云服务器、雅安服务器托管、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、雅安服务器托管、域名注册、VPS主机、云服务器、香港云服务器、免备案服务器等。

今天，我们来追查一个棘手的React bug，知名组件库material-ui就受其影响。

这个bug的产生涉及多方因素，包括：

useEffect执行时机(很可能与你想的不一样)
合成事件原理
v17源码中对合成事件的改动
Portal原理

这篇文章很长很长，有非常多源码细节。

你可以用如下Demo和我一起debug源码，更有破案的感觉

在线Demo地址

相信整篇文章过完，你能对如上知识点有更深的理解。

接下来，让我们复现案发现场吧。

只在v17下复现的bug

假设，我们有个ToastButton组件，代码如下：

 
 
 
   
  
  
  function ToastButton() {   
  
  
    const [show, setShow] = useState(false);   
  
  
     
  
  
    useEffect(() => {   
  
  
      if (!show) return;   
  
  
     
  
  
      function clickHandler(e) {   
  
  
        setShow(false);   
  
  
      }   
  
  
     
  
  
      document.addEventListener("click", clickHandler);   
  
  
      return () => {   
  
  
        document.removeEventListener("click", clickHandler);   
  
  
      };   
  
  
    }, [show]);   
  
  
     
  
  
    return (   
  
  
         
  
  
         setShow(true)}>Show Toast   
  
  
        {show && Hey, Ka Song～

}

触发点击事件会让show状态置为false，达到「点击页面任意区域关闭toast」的效果。

function App() {
return (
);
}
ReactDOM.render(, document.getElementById("root"));

接下来，我们再增加一个渲染Portal的组件PortalRenderer，代码如下：

function PortalRenderer() {
const [show, setShow] = useState(false);
return (
setShow(true)}>
Render portal
{show &&
ReactDOM.createPortal(
who is handsome？
,
document.body
)}
);
}

会使用ReactDOM.createPortal在document.body上挂载一个div，内容为who is handsome?。

// 节选自PortalRenderer
{show &&
ReactDOM.createPortal(
who is handsome？
,
document.body
)}

// 节选自ToastButton
useEffect(() => {
if (!show) return;
function clickHandler(e) {
setShow(false);
}
document.addEventListener("click", clickHandler);
return () => {
document.removeEventListener("click", clickHandler);
};
}, [show]);

大佬，怎么办？升级React17，Toast组件不能用了

只在v17下复现的bug

div去哪了?

v17有哪些变化?

useEffect的执行时机

useEffect的边界case

bug解决

参考资料