React 基础面试题, React 生命周期有哪些阶段?每个阶段对应的函数是什么?
React 基础面试题, React 生命周期有哪些阶段?每个阶段对应的函数是什么?
QA
Step 1
Q:: React 生命周期有哪些阶段？每个阶段对应的函数是什么？
A:: React 的生命周期主要分为三个阶段：挂载阶段 (Mounting)、更新阶段 (Updating)、卸载阶段 (Unmounting)。
1. 挂载阶段：
- constructor()``: 构造函数，初始化状态和绑定事件处理函数。
- static getDerivedStateFromProps(props, state)``: 用于在渲染之前更新状态。
- render()``: 渲染 UI。
- componentDidMount()``: 组件挂载完成后调用，可以在此进行 DOM 操作或数据请求。
2. 更新阶段：
- static getDerivedStateFromProps(props, state)``: 同挂载阶段。
- shouldComponentUpdate(nextProps, nextState)``: 判断是否需要重新渲染组件。
- render()``: 同挂载阶段。
- getSnapshotBeforeUpdate(prevProps, prevState)``: 在更新之前记录 DOM 信息。
- componentDidUpdate(prevProps, prevState, snapshot)``: 更新完成后调用，可以在此处理 DOM 操作。
3. 卸载阶段：
- componentWillUnmount()``: 组件卸载之前调用，可以在此进行清理工作。
Step 2
Q:: 为什么使用 getDerivedStateFromProps 而不是 componentWillReceiveProps？
A:: getDerivedStateFromProps 是一个静态方法，它在组件实例化或接收到新的 props 时被调用。与 componentWillReceiveProps 不同，它不会引发副作用，也更容易进行纯函数计算，从而减少副作用的发生。componentWillReceiveProps 已被废弃，因此应使用 getDerivedStateFromProps 代替。
Step 3
Q:: 什么是 React 的 render 方法，它的重要性是什么？
A:: render 方法是 React 组件中唯一必须实现的方法，用于描述组件的 UI 结构。React 将根据 render 方法的返回值来更新 DOM 树，从而渲染出相应的界面。
Step 4
Q:: 为什么在 React 中要在 componentDidMount 中进行数据请求？
A:: componentDidMount 是 React 组件挂载完成后执行的方法，此时组件已经插入到 DOM 中，可以安全地进行数据请求、订阅等操作。数据请求在这个阶段进行，有助于确保组件的初始渲染不会被阻塞，同时可以在数据返回后更新组件的状态。