为什么 React 入口是一个状态？

Question

正如标题所问，我不太清楚为什么门户是一种状态。我问的是关于渲染和 re-rendering 的技术细节，或者是否还有其他一些潜在原因。

为什么会是这样的状态：

const [container] = useState(document.createElement('div'));

而且不仅仅是一个常规变量，像这样：

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

编辑：

当我将容器放在 useState() 中时，它会更新 re-render content/children 而不会出现任何中断。当容器处于状态之外时，更新将变得不稳定。

Answer 1

只需执行 const container = document.createElement('div'); 每次重新渲染都会创建一个新的 div，但是通过将其存储在未更改的状态下，React 只会运行该代码一次并保留抓住那个元素。

Answer 2

我有另一种方法。我没有将 createElement 调用添加到状态变量中，而是将它们移出了反应组件。

而不是这个

const ModalContainer = (props) => {
  const [modalSection] = useState(document.createElement('section'));
  //do stuff
}

这样做

const modalSection = document.createElement('section');

const ModalContainer = (props) => {
 // Do stuff
 // return stuff
}

Why is the React portal a state?