BFE.devAI解答 - React 小测验
9. React re-render 6 - Context

这段代码的输出顺序是什么？

输出顺序是：

1. "App"
2. "A"
3. "B"
4. "C"
5. "B"
6. "D"

说明：

• 首先渲染 <App/>，调用 App 组件，输出 "App"。
• 在 App 组件内部，渲染 <A> 组件。调用 A 组件，输出 "A"。在 A 组件内部，调用 useEffect，并根据依赖数组为 [] 更新 state 状态。由于此时 state 为 0，因此更新后 state 变为了 1。
• <B> 组件被渲染，由于使用了 useContext，因此可以获取到 MyContext 在 A 组件中提供的 state 值（即 1）。因此输出 "B"。
• <C> 组件被渲染，输出 "C"。
• <B> 组件被卸载，因此输出 "B"。
• <D> 组件被渲染，输出 "D"。