BFE.devAI解答 - React 小测验
3. React re-render 3
- 如果在控制台执行以下代码，则输出什么？
console.log(ReactDOM.createRoot(document.createElement('div'))._internalRoot)
答：输出 null。因为在调用 createRoot 时，它会返回一个 Root 对象的引用，但是该 Root 对象只有在调用 render 方法之后才能被实例化并挂载到 DOM 上，而我们在执行 console.log 时还没有调用 render 方法，所以该 _internalRoot 属性为 null。
- 在浏览器中打开该应用，在控制台中可以看到输出：
A B C D App。请解释为什么会按照这个顺序输出。
答：在 <App/> 渲染时，首先会渲染 <A><B/></A>，因此会输出 A。而在 A 的子组件 B 中又渲染了 <C/>，因此会输出 B 和 C。接着渲染了 <D/>，因此会输出 D。最后会输出 App，因为组件渲染结束后会执行 useEffect 的回调函数，而在回调函数中又更新了 state 的值，因此组件又重新渲染，而在重新渲染时会再次执行 App 组件，因此会输出 App。所以输出的顺序为 A B C D App。