react 中代码执行顺序

React中的代码执行顺序主要是指组件的生命周期函数的执行顺序，以及渲染过程中的函数执行顺序。React组件的生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。

1. 挂载阶段：
- `constructor`: 构造函数，用于初始化状态和绑定方法，它是组件生命周期中第一个被调用的方法。
- `static getDerivedStateFromProps`: 静态方法，会在调用 render 方法之前被调用，并且在初始挂载及后续更新时都会被调用。
- `render`: 渲染方法，这是返回 JSX 的地方，负责渲染 UI。
- `componentDidMount`: 组件挂载到 DOM 后调用，是进行 AJAX 请求、添加事件监听器等操作的好地方。

2. 更新阶段：
- `static getDerivedStateFromProps`: 同上，挂载阶段和更新阶段都会调用。
- `shouldComponentUpdate`: 决定组件是否应该更新，用于性能优化。
- `render`: 同上，负责渲染 UI。
- `getSnapshotBeforeUpdate`: 渲染前的钩子，可以获取到更新前的 DOM 状态。
- `componentDidUpdate`: 组件更新后调用，用于进行状态更新后的操作，如读取更新后的 DOM。

3. 卸载阶段：
- `componentWillUnmount`: 组件即将卸载时调用，用于清理资源，如取消网络请求和移除事件监听器等。

除了这些生命周期方法外，React 16 引入了新的错误边界概念，用于捕获子组件树的 JavaScript 错误并防止整个应用崩溃，相关的生命周期方法有：
- `static getDerivedStateFromError`: 渲染备用的 UI 当子组件抛出错误时。
- `componentDidCatch`: 错误捕获后的处理函数。