getContainer 的一些变化

2022-12-08

@zombieJ

文章被以下专栏收录：

Ant Design

Ant Design

文档贡献者

Tree 的勾选传导组件级别的 CSS-in-JS

// Fake Code. Just for Demo

const PopupWrapper = () => {

const eleRef = React.useRef<HTMLDivElement>(null);

React.useEffect(() => {

// It's much complex with timing in real world. You can view the source for more detail:

// https://github.com/react-component/portal/blob/master/src/Portal.tsx

const container: HTMLElement = getContainer(eleRef.current);

// ...

}, []);

return (

{...}

</div>

);

}

// Fake Code. Just for Demo

const defaultGetContainer = () => {

const div = document.createElement('div');

document.body.appendChild(div);

return div;

};

const SomeComponent = ({ getContainer = defaultGetContainer }) => (

);

React 18 Concurrent Mode

React 18 中，effect 可能会多次触发。为了防止不经意间破坏开发者的行为，在 StrictMode 下它也做了相应的调整：

React mounts the component.
- Layout effects are created.
- Effect effects are created.
React simulates effects being destroyed on a mounted component.
- Layout effects are destroyed.
- Effects are destroyed.
React simulates effects being re-created on a mounted component.
- Layout effects are created
- Effect setup code runs

简单理解就是 StrictMode 下，即便你的 deps 里是空对象，effect 仍然会多次触发。在切换为 React 18 StrictMode 的时候，我们会发现在 HTML 中会成对出现挂载节点，同时前一个是空的：

html

<body>
  <div id="root">...</div>

  <!-- Empty -->
  <div className="sample-holder"></div>

  <!-- Real in use -->
  <div className="sample-holder">
    <div className="ant-component-wrapper">...</div>
  </div>
</body>

因而我们调整了调用实现，默认的 getContainer 也通过 state 进行管理，确保在 StrictMode 下会清理前一个 effect 生成的节点：

tsx

// Fake Code. Just for Demo
const SomeComponent = ({ getContainer }) => {
  const [myContainer, setMyContainer] = React.useState<HTMLElement | null>(null);

  React.useEffect(() => {
    if (getContainer) {
      setMyContainer(getContainer());
      return;
    }

    const div = document.createElement('div');
    document.body.appendChild(div);
    setMyContainer(div);

    return () => {
      document.body.removeChild(div);
    };
  }, [getContainer]);

  return <PopupWrapper getContainer={() => myContainer} />;
};

将 getContainer 放入 effect 管理后，我们可以更符合 React 生命周期的方式去管理节点，同时也可以在 getContainer 变化时进行清理。从而支持动态改变 getContainer 的场景（虽然我个人比较怀疑这种使用场景的普遍性）。

最后

由于修复了 getContainer 不支持动态改变的问题，它也引入了一个潜在的 breaking change。开发者如果自定义 getContainer 每次都是创建新的 DOM 节点时，它就会因为 effect 不断执行，导致节点不断创建而死循环。如果你使用了这种方式并且遇到了问题，需要注意检查。