React无条件递归渲染引发页面无限加载的原理探究

先看你给出的这段有问题的代码：

function App() {
  return (
    <App>
      ...other JSX here
    </App>
  );
}

这段代码会触发无限递归渲染，最终导致浏览器资源耗尽、页面无响应，内部运行机制可以拆解成以下几个步骤：

• 当React首次启动并尝试渲染根组件App时，会调用App()函数执行组件逻辑
• 函数执行到return语句时，React会解析返回的JSX，发现其中包含自定义组件<App>——React对自定义组件的处理逻辑是调用对应的组件函数来生成该组件的渲染内容
• 这就意味着，每一次App组件渲染，都会触发对App()函数的再次调用；新的调用又会返回包含<App>的JSX，再次触发调用，形成了没有终止条件的无限循环
• 和普通JS函数递归一样，每次调用都会在调用栈中新增一层，同时React会不断尝试创建新的组件实例、处理JSX，内存占用持续飙升
• 当浏览器的调用栈达到上限，或者内存资源被耗尽时，就会提示页面无响应

简单来说，就是你给React组件设置了一个没有终止条件的递归渲染逻辑，React无法自动终止这个过程，只能一直执行直到浏览器扛不住。

内容的提问来源于stack exchange，提问作者StableUpper