https://fe-interview.pangcy.cn/tags/%E7%B1%BB%E7%BB%84%E4%BB%B6/Recent content in 类组件 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/react/react-06/Wed, 05 Mar 2025 12:28:17 +0000https://fe-interview.pangcy.cn/docs/framework/react/react-06/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考察候选人以下能力维度：</p> <ol> <li><strong>框架机制理解</strong>：对React类组件生命周期的阶段性划分及执行顺序的掌握</li> <li><strong>API运用经验</strong>：辨别各生命周期方法的使用场景及废弃API的演进</li> <li><strong>性能优化意识</strong>：理解关键方法（如shouldComponentUpdate）在渲染优化中的作用</li> </ol> <p>具体评估点：</p> <ul> <li>挂载阶段各方法的执行顺序与职责划分</li> <li>更新阶段的条件触发与优化控制</li> <li>卸载阶段资源回收的必要性</li> <li>废弃生命周期方法的替代方案认知</li> <li>错误使用场景辨别（如setState使用限制）</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>组件生命周期 &gt; 阶段划分 &gt; 方法执行顺序 &gt; 使用场景 &gt; 废弃API演进</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>React类组件通过生命周期方法实现&quot;过程式编程&quot;，核心流程分为三个阶段：</p> <ol> <li> <p><strong>挂载阶段</strong>（Mounting）：</p> <ul> <li><code>constructor</code>：初始化状态、绑定方法</li> <li><code>static getDerivedStateFromProps(props, state)</code>：根据props派生state</li> <li><code>render</code>：生成虚拟DOM</li> <li><code>componentDidMount</code>：DOM就绪后执行副作用（API请求、DOM操作）</li> </ul> </li> <li> <p><strong>更新阶段</strong>（Updating）：</p> <ul> <li><code>static getDerivedStateFromProps</code>：props变化时更新state</li> <li><code>shouldComponentUpdate(nextProps, nextState)</code>：返回布尔值控制是否渲染</li> <li><code>render</code>：重新生成虚拟DOM</li> <li><code>getSnapshotBeforeUpdate( (prevProps, prevState)</code>：获取DOM快照</li> <li><code>componentDidUpdate( (prevProps, prevState, snapshot)</code>：更新后执行操作</li> </ul> </li> <li> <p><strong>卸载阶段</strong>（Unmounting）：</p> <ul> <li><code>componentWillUnmount</code>：清理定时器、取消订阅</li> </ul> </li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>在<code>constructor</code>中直接复制props到state（应使用<code>getDerivedStateFromProps</code>）</li> <li><code>componentDidUpdate</code>中无限制调用setState导致死循环</li> <li>混淆<code>componentWillReceiveProps</code>与<code>getDerivedStateFromProps</code>的使用场景</li> <li>在<code>render</code>中执行副作用操作破坏纯函数特性</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>React类组件生命周期分为挂载、更新、卸载三个阶段：</p> <p><strong>挂载阶段</strong>：</p> <ol> <li><code>constructor</code>：初始化state与事件绑定</li> <li><code>getDerivedStateFromProps</code>（静态）：根据props派生state</li> <li><code>render</code>：生成虚拟DOM结构</li> <li><code>componentDidMount</code>：发起网络请求、DOM操作、事件订阅</li> </ol> <p><strong>更新阶段</strong>：</p> <ol> <li><code>getDerivedStateFromProps</code>：props更新时同步state</li> <li><code>shouldComponentUpdate</code>：通过浅比较阻止无效渲染（返回false时流程中断）</li> <li><code>render</code>：生成新虚拟DOM</li> <li><code>getSnapshotBeforeUpdate</code>：获取更新前DOM状态（如滚动位置）</li> <li><code>componentDidUpdate</code>：基于新DOM进行操作（需条件判断避免循环）</li> </ol> <p><strong>卸载阶段</strong>： <code>componentWillUnmount</code>：清除定时器、取消网络请求、移除事件监听</p>