BFE.dev
React 小测验9. React re-render 6 - ContextAI解答
以下为ChatGPT自动生成的解答，正确与否请自行判断。 也许你也可以从大家的发帖或者 官方解答中找到想要的答案！

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"。