为什么 React 门户是一个状态？答案

【问题标题】：Why is the React portal a state?为什么 React 门户是一个状态？
【发布时间】：2020-11-07 00:05:16
【问题描述】：

就像标题所问的那样，我不确定为什么门户网站是一个州。我在询问有关渲染和重新渲染的技术细节，或者是否有其他一些潜在原因。

为什么要处于这样的状态：

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

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

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

编辑：

当我将容器放在useState() 中时，它会更新并重新渲染内容/子项，而不会出现任何中断。当容器处于状态之外时，更新将是不稳定的。

【问题讨论】：

在这些文档中哪里提到处于状态？
@MattAft 好点。虽然当我环顾四周时，似乎将它与useState() 一起使用是很常见的。当我排除它并在不删除门户的情况下更新门户内容时，它将被删除并重新渲染，而不仅仅是重新渲染。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

不是这个

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

这样做

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

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

【讨论】：