都 2025 年了，还有人不知道 React 中的 bailout？React 可真是个聪明的小家伙！它通过巧妙的 ba

React 可真是个聪明的小家伙！它通过巧妙的 bailout 策略大大提升了运行时的性能，这也让开发者能够享受到流畅的用户体验。那么，今天就让我们一起瞧瞧这个“优化小精灵”是如何运作的吧！

🌟 BeginWork 阶段：开始工作时的魔法

在 beginWork 阶段，React 会像一个敏锐的侦探一样，仔细检查每个节点是否需要做一些“工作”。如果它发现自己和上次的渲染差不多，或者没有必要做什么重大更新，它就会聪明地跳过这一段，进入 bailout 模式。下面是关键的判断条件：

oldProps 和 newProps 一样：如果新的和旧的属性完全一样，React 会打个哈欠，觉得自己可以跳过更新了。
Legacy Context（旧的上下文）没有变化：React 发现老朋友还是老朋友，没必要再聊一遍。
fiberNode.type 没有变化：没换成其他类型的组件，React 觉得这没啥大不了的。
没有更新：如果当前没有任何新消息，React 就觉得没必要更新了。

只要这些条件全都满足，React 就会跳过这段工作，节省宝贵的时间，真是个能干的家伙！

javascript
复制编辑
if (
  oldProps !== newProps ||
  hasContextChanged() ||
  workInProgress.type !== current.type
) {
  // React 会做一些工作...
} else {
  // 无需做任何更新，马上退出！
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

🧚‍♀️ 跳过不必要的工作：Bailout 轻松搞定

在工作开始前，React 还会检查一些额外的条件来决定是否可以跳过当前的 fiber。如果当前节点没有任务要做，React 就会使用 bailoutOnAlreadyFinishedWork 直接跳过当前节点，并且把任务传递给子节点。节约时间，效率满分！

function bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes) {
  // 先判断子树是否也有更新
  if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
    return null; // 如果没有更新，直接跳过！
  }
  // 没工作要做的节点，继续递交给子节点
  cloneChildFibers(current, workInProgress);
  return workInProgress.child;
}

🎉 React.memo 和 Bailout 策略：开发者的小帮手

React 不仅自己聪明，还给了开发者一把利剑——React.memo。你可能在想：“这个 React.memo 有什么魔力呢？” 其实它的作用就是帮你跳过不必要的渲染，只有当 props 发生变化时，它才会允许渲染。通过这个API，React 直接进入 bailout 模式，避免无效的更新。

if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

只要 prevProps 和 nextProps 相等，并且 ref 没有变化，React 就会快速跳过，真是太懂开发者的心了！

🧸 State 没变也能跳过：React 真机智

React 还会在 beginWork 阶段检查每个 Function Component 的状态是否变化。如果状态没变，React 就会很聪明地选择跳过更新，这可为你节省很多渲染时间。

if (current !== null && !didReceiveUpdate) {
  bailoutHooks(current, workInProgress, renderLanes);
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

它会判断新旧的 state 是否一致，如果一致，就会进入 bailout 模式，避免不必要的更新。

🏞️ Context 和 Bailout：更微妙的配合

Context 也是一个非常巧妙的存在。当父组件的 Context 没有变化时，React 会在 updateContextProvider 阶段聪明地跳过更新，避免不必要的渲染。只有当 Context 发生变化时，才会让子组件重新渲染。

if (objectIs(oldValue, newValue)) {
  if (oldProps.children === newProps.children && !hasContextChanged()) {
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }
} else {
  // 父组件的 Context 变了，需要更新子组件
  propagateContextChange(workInProgress, context, renderLanes);
}

🎮 怎么命中 Bailout？让我们来优化性能！

有时候，开发者需要手动触发 bailout，来避免浪费性能。比如，当你有一个耗时的组件（比如 ExpensiveCpn）时，你可以通过将可变部分和不可变部分分离，确保不可变部分命中 bailout：原：

import React, { useState, useEffect, ReactNode } from "react";

export default function App() {
 const [num, updateNum] = useState(0);
 return (
   <div title={num + ""}>
     <input value={num} onChange={(e) => updateNum(+e.target.value)} />
     <p>num is {num}</p>
     <ExpensiveCpn />
   </div>
 );
}

function ExpensiveCpn() {
 let now = performance.now();
 while (performance.now() - now < 100) {}
 console.log("耗时的组件 render");
 return <p>耗时的组件</p>;
}

优化：

import React, {useState, useEffect} from 'react';
import {bindHook, utils, getLibraryMethod} from 'log';

const {log, COLOR: {SCHEDULE_COLOR, RENDER_COLOR, COMMIT_COLOR}} = utils;

// bindHook('beginWork', (current, wip) => {
//   log(RENDER_COLOR, `beginWork`, getLibraryMethod('getComponentNameFromFiber')?.(wip));
// })  

function InputWrapper({children}: {children: React.ReactNode}) {
  const [num, updateNum] = useState(0);

  return (
    <div title={num + ''}>
    <input value={num} onChange={(e) => updateNum(+e.target.value)} />
    <p>num is {num}</p>
    {children}
  </div>
  )
}

export default function App() {
  
  return (
    <InputWrapper>
      <ExpensiveCpn />
    </InputWrapper>
  );
}


function ExpensiveCpn() {
  let now = performance.now();
  while (performance.now() - now < 100) {}
  console.log('耗时的组件 render');
  return <p>耗时的组件</p>;
}

通过这种方式，父组件的更新不会影响到 ExpensiveCpn，而它会跳过不必要的重新渲染。

🚀 总结：如何在 React 中命中 Bailout 策略

将可变部分与不变部分分离：这样 React 可以在不需要重新渲染的情况下跳过不变的部分。
使用 React.memo：帮助组件避免无效的更新，提升性能。
避免重复渲染昂贵组件：通过分离组件、优化 props，减少不必要的重渲染。
React Smart Bailout：React 的优化不仅仅是让开发者更省心，也让应用性能变得更快！

React 就是这么一个聪明的小精灵！通过这些策略，它能够为我们省去大量的性能开销，让应用变得流畅无比。别忘了，尽量让可变的和不变的部分分开，让 React 在关键时刻帮你执行 bailout 优化！