🐛[BUG] 用 createGlobalStyle 创建的样式存在卸载问题

[pokerboard]

🐛 bug 描述

当使用 createGlobalStyle 创建全局样式后，卸载时样式时内部没有保证会触发清除函数，导致样式一直被缓存。

通过排查，可以确定这是 emotion 内的 @emotion/use-insertion-effect-with-fallbacks 库使用了 React 18 的 useInsertionEffect 的原因（改成 useLayoutEffect 后打上补丁后正常运行）
styled-component 也出现过类似的问题 styled-components/styled-components#4101 (comment)

📷 复现步骤

useInsertionEffect(() => {
  console.log('加载');

  return () => {
    console.log('卸载');
  };
});

1. A页面运行以上代码（记得首次刷新页面）
2. 切换B页面，控制台只输出了“加载”

🏞 期望结果

emotion 短时间应该不会修复，建议打个补丁或 createGlobalStyle 更换 styled-component 的 createGlobalStyle

© 版本信息

• antd-style 版本: 3.6.1
• @emotion/use-insertion-effect-with-fallbacks 版本: 1.0.1
• umi 版本: 4.1.5
• 浏览器环境

[arvinxx]

有没有其他方法？我其实一直想替换掉这个createGlobalStyle了，emotion react 做的实在有问题

[pokerboard]

有没有其他方法？我其实一直想替换掉这个createGlobalStyle了，emotion react 做的实在有问题

目前没有

[arvinxx]

你建议怎么做？直接把代码拷过来自己搞一个？

[pokerboard]

你建议怎么做？直接把代码拷过来自己搞一个？

1.向 emotion 反馈
2.patch-package 给 @emotion/use-insertion-effect-with-fallbacks 打个补丁

@emotion+use-insertion-effect-with-fallbacks+1.0.1.patch

diff --git a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
index 1b0e17d..5bc580d 100644
--- a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
+++ b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
@@ -4,7 +4,7 @@ var syncFallback = function syncFallback(create) {
   return create();
 };
 
-var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
+var useInsertionEffect = false;
 var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
 var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
 

我目前就这么用了

[andyyxw]

确实，严重的性能问题

[arvinxx]

@andyyxw 能否量化下这块影响有多大？

[andyyxw]

@andyyxw 能否量化下这块影响有多大？

我正常用的，不是 global style，组件rerender后style标签越来越多，跟实际使用的style的量有关系不太好量化。
我们是大数据的表格，页面操作越多越卡，比较明显。
后来看到有 speedy 模式，开启后暂时没有性能问题了。

[pokerboard]

因为打补丁的方案会因@emotion/use-insertion-effect-with-fallbacks版本更新而需要重新生成补丁才能生效，所以在这里补充一下另外的解决方案

// 入口文件app.ts

import React from 'react';
React.useInsertionEffect = React.useLayoutEffect;