reactjs - 为什么 React 门户是一个状态？

Question

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

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

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

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

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

编辑：

当我将容器放入其中useState()时，它将更新并重新渲染内容/子项，而不会受到任何干扰。当容器处于状态之外时，更新将是不稳定的。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

而不是这个

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

做这个

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

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

2 回答 2