https://fe-interview.pangcy.cn/tags/%E6%B5%85%E6%AF%94%E8%BE%83/Recent content in 浅比较 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/react/react-17/Wed, 05 Mar 2025 12:28:17 +0000https://fe-interview.pangcy.cn/docs/framework/react/react-17/<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>React性能优化理解</strong>：评估对React渲染机制及优化策略的掌握程度</li> <li><strong>组件更新机制原理</strong>：检验对虚拟DOM、组件生命周期、渲染触发条件的理解深度</li> <li><strong>不可变数据实践</strong>：考察对引用类型数据处理的工程化思维</li> </ol> <p>具体技术评估点：</p> <ul> <li>类组件生命周期方法<code>shouldComponentUpdate</code>的实现与限制</li> <li>函数组件<code>React.memo</code>的浅比较机制及高阶组件应用</li> <li><code>PureComponent</code>与普通组件的行为差异</li> <li>浅比较（Shallow Compare）的底层实现原理</li> <li>引用类型数据在优化策略中的处理要点</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><ol> <li><code>shouldComponentUpdate</code> &gt; <code>PureComponent</code> &gt; 浅比较原理</li> <li><code>React.memo</code> &gt; 高阶组件 &gt; 引用稳定性</li> <li>不可变数据操作 &gt; 性能优化策略</li> </ol> <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><strong>浅比较工作机制</strong>：</p> <ul> <li>对基本类型值进行<code>Object.is</code>比较</li> <li>对对象类型进行引用地址比对</li> <li>仅比较props第一层属性（Shallow Compare）</li> <li>时间复杂度O(n)，空间复杂度O(1)</li> </ul> <p><strong>典型执行流程</strong>：</p> <div class="prism-codeblock "> <pre id="b4e57a5" class="language- "> <code>触发更新 → 执行SCU（或自动浅比较）→ 对比新旧props/state → │ 无变化 → 阻止渲染 └ 有变化 → 继续渲染流程</code> </pre> </div> <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><ol> <li>误认为浅比较会递归对比嵌套对象</li> <li>在<code>shouldComponentUpdate</code>中直接修改state导致死循环</li> <li>忽略函数类型prop的引用变化问题</li> <li>在渲染函数中动态创建对象导致优化失效</li> </ol> <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> <ol> <li><strong>shouldComponentUpdate（类组件）</strong><br> 手动控制更新决策，通过对比nextProps/nextState与当前值的浅比较返回布尔值。典型实现：</li> </ol> <div class="prism-codeblock "> <pre id="1481aa2" class="language-javascript "> <code>shouldComponentUpdate(nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) }</code> </pre> </div> <ol start="2"> <li><strong>React.memo（函数组件）</strong><br> 高阶组件缓存渲染结果，对props进行浅比较。可自定义比较函数：</li> </ol> <div class="prism-codeblock "> <pre id="88a329c" class="language-javascript "> <code>const MemoizedComp = React.memo(MyComp, (prev, next) =&gt; { return shallowEqual(prev, next) })</code> </pre> </div> <ol start="3"> <li><strong>PureComponent（类组件）</strong><br> 自动实现props和state的浅比较，相当于内置<code>shouldComponentUpdate</code>的优化版本。继承方式：</li> </ol> <div class="prism-codeblock "> <pre id="69b2f87" class="language-javascript "> <code>class MyComp extends React.PureComponent { // 自动进行浅比较 }</code> </pre> </div> <p><strong>浅比较限制</strong>：</p>