React 版本演进史

┌────────────────┐   ┌────────────────┐   ┌────────────────┐   ┌────────────────┐   ┌────────────────┐
│ 2010 XHP+PHP   │ → │ 2011 FaxJS     │ → │ 2012 Instagram │ → │ 2013 开源发布  │ → │ 2015 React 15  │
│ UI 危机         │   │ 函数式原型      │   │ 内部验证       │   │ 虚拟 DOM 亮相   │   │ Stack Reconciler│
└────────────────┘   └────────────────┘   └────────────────┘   └────────────────┘   └────────────────┘

问题：手动操作 DOM + 状态与视图耦合 = 代码混乱、难以维护

新消息到达 → 手动查询 DOM → 判断节点是否存在 → 插入或更新 → 状态散落在各处

解决：声明式 UI — 状态驱动视图，框架自动 diff 更新

state 变化 → 调用 render() → 生成新虚拟 DOM → diff 对比 → 只更新变化的真实 DOM

setState 触发
     │
     ▼
┌──────────────────────────────────────────┐
│  同步递归遍历整个组件树                      │
│  每个组件:  shouldComponentUpdate?         │
│            → render() 生成新虚拟 DOM        │
│            → diff 对比新旧虚拟 DOM          │
│            → 收集差异                       │
│                                           │
│  无法中断！必须一口气跑完！               │
│  大型应用: 100ms+ 阻塞主线程               │
└──────────────────────────────────────────┘
     │
     ▼
  commit 更新到真实 DOM

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 如果数据没变，跳过该子树的 diff
    return nextProps.item.id !== this.props.item.id;
  }
  render() {
    return <div>{this.props.item.name}</div>;
  }
}

class ListItem extends React.PureComponent {
  render() {
    return <div>{this.props.item.name}</div>;
  }
}

// React 事件回调内：自动批处理
handleClick() {
  this.setState({ a: 1 });
  this.setState({ b: 2 });
  // 只触发一次渲染
}

// setTimeout 内：不批处理！
handleClick() {
  setTimeout(() => {
    this.setState({ a: 1 });
    this.setState({ b: 2 });
    // 触发两次渲染！
  }, 0);
}

shouldComponentUpdate  →  手动维护成本高，容易出错
PureComponent          →  浅比较无法处理复杂数据结构
Batching               →  只在 React 事件内生效，异步上下文无效

本质问题：这些优化都在"减少工作量"，但没有解决"工作方式"的根本缺陷

Stack Reconciler 依然是同步递归 → 依然一口气跑完 → 依然阻塞主线程

┌───────────────────────────────────────────────┐
│              浏览器主线程                        │
└──────┬───────────────────────────────┬────────┘
       │                               │
       ▼                               ▼
┌──────────────┐                ┌──────────────┐
│  低优任务 (A)  │                │ 高优任务 (B)  │
│ 渲染大列表     │                │ 用户输入框打字 │
└──────┬───────┘                └──────┬───────┘
       │                               │
       │  (执行一半，耗时 5ms)           │
       ├───────────────────────────────┤  ← React 调度器发现高优交互
       │  中断当前 A 任务的渲染            │
       │                               │
       │                               ▼
       │                        ┌──────────────┐
       │                        │ 执行 B 任务   │
       │                        │ 更新输入框 UI  │
       │                        └──────┬───────┘
       │                               │
       │  (B 任务执行完毕)                │
       ├───────────────────────────────┘  ← 恢复现场
       ▼
┌──────────────┐
│  恢复任务 (A)  │
│ 继续渲染大列表 │
└──────────────┘

// 并发更新的核心 API
import { useState, useDeferredValue, useTransition } from "react";

// 方式一：useDeferredValue，适合值来自 props、无法改更新调用方的场景
function SearchList({ allItems }) {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  const filtered = allItems.filter((item) => item.name.includes(deferredQuery));

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul style={{ opacity: isStale ? 0.5 : 1 }}>
        {filtered.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

// 方式二：startTransition，适合自己能控制 setState 的场景
function FilterPanel({ allItems }) {
  const [list, setList] = useState(allItems);
  const [isPending, startTransition] = useTransition();

  const handleFilter = (keyword) => {
    // 非紧急更新：可以被高优先级更新打断
    startTransition(() => {
      setList(allItems.filter((item) => item.name.includes(keyword)));
    });
  };

  return (
    <button onClick={() => handleFilter("react")} disabled={isPending}>
      {isPending ? "过滤中..." : "只看 React"}
    </button>
  );
}

问题：同步递归 + 无法中断 = 大型应用卡顿

setState → 同步递归遍历整个组件树 → 主线程被阻塞 100ms → 掉帧卡顿

解决：Fiber 时间切片 — 拆分成微小执行单元，每执行一个就检查剩余时间

setState → 执行一个 Fiber 节点 → 检查时间 → 有剩余继续，没剩余让出主线程 → 下一帧恢复

// React 19 的 use() hook — 统一资源消费
function UserProfile({ userPromise }) {
  // use() 可以在条件语句和循环中使用（打破 Hooks 规则）
  // 注意：Promise 要来自缓存或上层，不能在渲染里直接新建，否则每次渲染都会重新请求
  const user = use(userPromise); // 自动与 Suspense 配合
  return <div>{user.name}</div>;
}

// React 19 的 Actions — startTransition 支持 async 函数
function UpdateName() {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);

  const handleSubmit = (name) => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/profile");
    });
  };
}

// React 16：事件代理到 document
document.addEventListener("click", (e) => {
  // 所有 React 应用的点击事件都在这里处理
  dispatchEvent(e); // React 内部的合成事件分发
});

// React 17+：事件代理到 root node
rootNode.addEventListener("click", (e) => {
  // 只处理该 React 应用的事件
  dispatchEvent(e);
});

挂载阶段（Mounting）                 更新阶段（Updating）                 卸载阶段（Unmounting）
┌───────────────────┐            ┌───────────────────┐              ┌───────────────────┐
│ componentWillMount │            │ componentWillReceiveProps│         │ componentWillUnmount│
│        ↓          │            │        ↓           │              └───────────────────┘
│   render()        │            │ shouldComponentUpdate│
│        ↓          │            │        ↓           │
│ componentDidMount │            │ componentWillUpdate │
└───────────────────┘            │        ↓           │
                                 │   render()         │
                                 │        ↓           │
                                 │ componentDidUpdate │
                                 └───────────────────┘

class UserProfile extends React.Component {
  // 1. 挂载：组件即将插入 DOM（已被废弃）
  componentWillMount() {
    console.log("componentWillMount - DOM 不存在，不能做 DOM 操作");
  }

  // 2. 挂载：组件已插入 DOM
  componentDidMount() {
    console.log("componentDidMount - 可以安全地做 DOM 操作和数据请求");
    this.fetchUser(this.props.userId);
  }

  // 3. 更新：父组件传入新 props（已被废弃）
  componentWillReceiveProps(nextProps) {
    if (nextProps.userId !== this.props.userId) {
      this.setState({ loading: true });
    }
  }

  // 4. 更新：判断是否需要重新渲染
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.userId !== this.props.userId;
  }

  // 5. 更新：即将开始重新渲染（已被废弃）
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate - render 之前");
  }

  // 6. 更新：渲染完成后
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser(this.props.userId);
    }
  }

  // 7. 卸载：组件即将从 DOM 移除
  componentWillUnmount() {
    console.log("componentWillUnmount - 清理定时器、取消订阅");
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

挂载阶段（Mounting）                 更新阶段（Updating）                 卸载阶段（Unmounting）
┌───────────────────┐            ┌───────────────────┐              ┌───────────────────┐
│  constructor()    │            │ getDerivedStateFromProps│         │ componentWillUnmount│
│        ↓          │            │        ↓           │              └───────────────────┘
│ getDerivedStateFromProps│       │ shouldComponentUpdate│
│        ↓          │            │        ↓           │
│   render()        │            │   render()         │
│        ↓          │            │        ↓           │
│ getSnapshotBeforeUpdate│ ← 新增│ getSnapshotBeforeUpdate│ ← 新增
│        ↓          │            │        ↓           │
│ componentDidMount │            │ componentDidUpdate │
└───────────────────┘            └───────────────────┘

class ChatList extends React.Component {
  // 替代 componentWillMount + componentWillReceiveProps
  // 纯函数：只根据 props/state 计算返回值，没有副作用
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.userId !== prevState.prevUserId) {
      return {
        prevUserId: nextProps.userId,
        messages: [], // 重置消息列表
      };
    }
    return null; // 不需要更新 state
  }

  // 替代 componentWillUpdate
  // 在 DOM 更新前获取快照信息（如滚动位置），传递给 componentDidUpdate
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.messages.length < this.props.messages.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop; // 返回滚动偏移量
    }
    return null;
  }

  // 收到 getSnapshotBeforeUpdate 的返回值作为 snapshot 参数
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot; // 恢复滚动位置
    }
  }

  render() {
    return <div ref={this.listRef}>{/* 消息列表 */}</div>;
  }
}

Render 阶段（可中断）                Commit 阶段（不可中断）
┌──────────────────────────┐      ┌──────────────────────────┐
│ getDerivedStateFromProps  │      │ componentDidMount        │
│ shouldComponentUpdate     │      │ componentDidUpdate        │
│ render                    │      │ getSnapshotBeforeUpdate  │
│                           │      │ componentWillUnmount     │
│ 可能执行多次！          │      │ 只执行一次             │
│ 中断 → 丢弃 → 重新开始     │      │ 一旦开始就不会中断        │
└──────────────────────────┘      └──────────────────────────┘

import { useEffect, useLayoutEffect } from "react";

function UserProfile({ userId }) {
  // 等价于 componentDidMount + componentDidUpdate + componentWillUnmount
  useEffect(() => {
    console.log("组件挂载或 userId 变化后执行");
    fetchUser(userId);

    // 返回的清理函数等价于 componentWillUnmount
    // 且在下次 effect 执行前也会先清理上一次的
    return () => {
      console.log("清理上一次 effect 或组件卸载");
    };
  }, [userId]); // 依赖数组：只有 userId 变化时才重新执行

  // useLayoutEffect vs useEffect 的区别：
  // useEffect   - 浏览器绘制后异步执行（不阻塞渲染）
  // useLayoutEffect - DOM 更新后、浏览器绘制前同步执行（阻塞渲染）
  useLayoutEffect(() => {
    // 适合读取 DOM 布局并同步修改（避免闪烁）
    const rect = ref.current.getBoundingClientRect();
    setTooltipPosition(rect.top);
  }, []);

  return <div ref={ref}>...</div>;
}

setState 触发
     │
     ▼
React 计算新虚拟 DOM
     │
     ▼
更新真实 DOM
     │
     ├──────────────────────────────────┐
     ▼                                  ▼
useLayoutEffect（同步，阻塞绘制）    浏览器绘制（Paint）
     │                                  │
     ▼                                  ▼
  执行完毕                          useEffect（异步，不阻塞绘制）
     │                                  │
     ▼                                  ▼
浏览器绘制                         执行完毕

Class Component 的三大痛点：

1. this 绑定地狱
   constructor 里 bind、render 里 bind、onClick 里箭头函数……
   一个组件 10 个事件处理函数 = 10 次 bind

2. 逻辑复用困难
   想复用"监听窗口大小"的逻辑 → HOC 包一层
   想复用"鼠标位置追踪"的逻辑 → 再包一层
   → "包装地狱"（Wrapper Hell）

3. 生命周期方法不内聚
   componentDidMount 里发请求 + 订阅 + 设置定时器
   componentWillUnmount 里清理订阅 + 清理定时器
   同一个逻辑分散在两个生命周期方法中 → 难以理解和维护

// Class Component：同一个逻辑分散在多个生命周期中
class WindowWidth extends React.Component {
  state = { width: window.innerWidth };

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  handleResize = () => {
    this.setState({ width: window.innerWidth });
  };

  render() {
    return <div>窗口宽度: {this.state.width}</div>;
  }
}

// Function Component：同一个逻辑集中在一处
function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>窗口宽度: {width}</div>;
}

// 逻辑复用：提取为自定义 Hook，任何组件都能用
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

// 使用：一行代码复用逻辑
function Dashboard() {
  const width = useWindowWidth();
  return <div>当前宽度: {width}</div>;
}

class Button extends React.Component {
  handleClick() {
    console.log(this); // undefined！this 丢失了
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

关键：this 的值由"调用方式"决定，不是由"定义方式"决定

render() 中：
  <button onClick={this.handleClick}>
                    ↑
                    这只是"引用"了 handleClick 函数，并没有调用它

用户点击按钮时：
  浏览器调用 handleClick()
  ↑ 注意：是"直接调用"，不是"通过对象调用"

  直接调用 → this = undefined（严格模式下）
  就像：const fn = obj.method; fn(); // this 不是 obj

class Button extends React.Component {
  constructor(props) {
    super(props);
    // bind 返回一个新函数，this 永远绑定到实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this); // Button 实例
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

class Button extends React.Component {
  handleClick() {
    console.log(this); // Button 实例
  }

  render() {
    // 箭头函数没有自己的 this，继承外层（render 的 this = 实例）
    return <button onClick={() => this.handleClick()}>Click</button>;
  }
}

class Button extends React.Component {
  // 类属性语法：箭头函数定义在实例上，this 自动绑定
  handleClick = () => {
    console.log(this); // Button 实例
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// 错误：直接传递方法引用，this 丢失
class Counter extends React.Component {
  state = { count: 0 };

  increment() {
    this.setState({ count: this.state.count + 1 });
    // TypeError: Cannot read property 'setState' of undefined
  }

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// 正确：constructor bind
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.increment = this.increment.bind(this);
  }

  state = { count: 0 };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// 正确：类属性箭头函数（最简洁）
class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

constructor 是 ES6 Class 的构造方法，在实例被创建时自动调用。
在 React Class Component 中，constructor 有 3 个职责：

1. 初始化 state
2. 绑定事件处理函数的 this
3. 调用 super(props) 初始化父类（React.Component）

class UserProfile extends React.Component {
  constructor(props) {
    super(props); // 必须第一行调用

    // 职责 1：初始化 state
    this.state = {
      name: props.name,
      loading: false,
    };

    // 职责 2：绑定 this
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    console.log(this.state.name); // this 正确指向实例
  }

  render() {
    return <div>{this.state.name}</div>;
  }
}

props = properties（属性）

props 是父组件传给子组件的只读数据。
子组件不能修改自己的 props——这是 React 单向数据流的核心原则。

// 父组件传递 props
function App() {
  return <UserProfile name="张三" age={25} />;
}

// 子组件接收 props
class UserProfile extends React.Component {
  render() {
    // this.props 是只读的
    return (
      <div>
        <p>姓名: {this.props.name}</p> {/* "张三" */}
        <p>年龄: {this.props.age}</p> {/* 25 */}
      </div>
    );
  }
}

// 子组件不能修改 props
class UserProfile extends React.Component {
  handleClick() {
    this.props.name = "李四"; // 报错！Props are read-only
  }
}

class UserProfile extends React.Component { ... }
                ↑
                继承了 React.Component

JavaScript 规则：子类的 constructor 中，必须先调用 super() 才能使用 this。
因为 super() 负责调用父类的构造函数来初始化 this 对象。

如果在 super() 之前访问 this → ReferenceError: Must call super constructor

// 不调用 super()
class Button extends React.Component {
  constructor(props) {
    // 没有调用 super()
    this.state = { clicked: false };
    // ReferenceError: Must call super constructor
    // before accessing 'this' or returning from derived constructor
  }
}

// 调用了 super() 但没传 props
class Button extends React.Component {
  constructor(props) {
    super(); // 没传 props
    console.log(this.props); // undefined！
    // React 内部不会帮你把 props 挂到 this 上
    // 只有 super(props) 才会触发 React.Component 内部的 this.props = props
  }
}

// 正确：super(props)
class Button extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // { label: "Click", onClick: fn }
  }
}

不调用 super():
  → JavaScript 引擎直接报错 ReferenceError
  → 代码根本跑不起来

调用 super() 但不传 props:
  → constructor 内 this.props = undefined
  → constructor 中无法访问 props
  → render() 等其他生命周期中 this.props 仍然正常
     （因为 React 在调用生命周期方法前会重新赋值 this.props）

所以：
  只有在 constructor 中需要访问 this.props 时，才"必须"传 props
  但最佳实践是"永远传 props"，避免踩坑

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    console.log("setState 前:", this.state.count); // 0

    this.setState({ count: this.state.count + 1 });
    console.log("setState 后:", this.state.count); // 0（还没更新！）

    this.setState({ count: this.state.count + 1 });
    console.log("再次 setState 后:", this.state.count); // 0（还是没更新！）

    // 最终只触发一次渲染，count = 1（不是 2！因为两次读到的都是 0）
  };

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    // React 事件回调内：批量更新
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0（异步，还没更新）

    setTimeout(() => {
      // setTimeout 内：React 17 立即更新，React 18 仍然是批量更新
      this.setState({ count: this.state.count + 1 });
      console.log(this.state.count); // React 17: 1, React 18: 取决于调度时机
    }, 0);

    // Promise 回调：React 17 立即更新
    Promise.resolve().then(() => {
      this.setState({ count: this.state.count + 1 });
      console.log(this.state.count); // React 17: 1
    });
  };
}

React 17 及以前                       React 18+
┌──────────────────────┐            ┌──────────────────────┐
│ onClick（React 事件）  │            │ onClick（React 事件）  │
│   setState × 3        │            │   setState × 3        │
│   → 1 次渲染       │            │   → 1 次渲染       │
├──────────────────────┤            ├──────────────────────┤
│ setTimeout / Promise  │            │ setTimeout / Promise  │
│   setState × 3        │            │   setState × 3        │
│   → 3 次渲染       │            │   → 1 次渲染       │
├──────────────────────┤            ├──────────────────────┤
│ 原生 DOM 事件          │            │ 原生 DOM 事件          │
│   setState × 3        │            │   setState × 3        │
│   → 3 次渲染       │            │   → 1 次渲染       │
└──────────────────────┘            └──────────────────────┘

// React 18 的 Automatic Batching 示例
import { createRoot } from "react-dom/client";

function Counter() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    // React 17: 在 setTimeout 中会触发 2 次渲染
    // React 18: 自动批处理，只触发 1 次渲染
    setTimeout(() => {
      setCount((c) => c + 1);
      setFlag((f) => !f);
    }, 0);
  }

  return <button onClick={handleClick}>{count}</button>;
}

// React 18 必须用 createRoot 才能启用 Automatic Batching
const root = createRoot(document.getElementById("root"));
root.render(<Counter />);

handleClick 执行
     │
     ├── setState({ a: 1 })  → 放入更新队列
     ├── setState({ b: 2 })  → 放入更新队列
     ├── setState({ c: 3 })  → 放入更新队列
     │
     ▼
handleClick 执行完毕（同步代码跑完）
     │
     ▼
调度回调（宏任务）：React 统一处理队列
     │
     ├── 合并 state: { a: 1, b: 2, c: 3 }
     ├── 执行一次 render()
     └── 更新一次 DOM

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    // 错误：对象式写法，每次读到的 this.state.count 都是旧值
    this.setState({ count: this.state.count + 1 }); // 0 + 1 = 1
    this.setState({ count: this.state.count + 1 }); // 0 + 1 = 1（覆盖）
    this.setState({ count: this.state.count + 1 }); // 0 + 1 = 1（覆盖）
    // 最终 count = 1

    // 正确：函数式写法，参数是上一次的最新 state
    this.setState((prevState) => ({ count: prevState.count + 1 })); // 0 + 1 = 1
    this.setState((prevState) => ({ count: prevState.count + 1 })); // 1 + 1 = 2
    this.setState((prevState) => ({ count: prevState.count + 1 })); // 2 + 1 = 3
    // 最终 count = 3
  };
}

// React 18 简化的调度逻辑
function scheduleUpdateOnFiber(fiber, lane, eventTime) {
  // 1. 将更新产生的 Lane（优先级）合并到根节点
  markRootUpdated(root, lane, eventTime);

  // 2. 交由调度器统一安排一次渲染（并发更新通过 MessageChannel 以宏任务调度）
  // 不论触发上下文是 onClick 还是 setTimeout，都会被合并进同一次调度中批量消费
  ensureRootIsScheduled(root, eventTime);
}

// Lanes 用 32 位二进制位图表示优先级
export const SyncLane = 0b0000000000000000000000000000001;
export const InputContinuousLane = 0b0000000000000000000000000000100;
export const DefaultLane = 0b0000000000000000000000000010000;
export const TransitionLane1 = 0b0000000000000000000000001000000;

// 位运算实现极速优先级判断
// 合并优先级：按位或
mergeLanes(SyncLane, DefaultLane); // 0b10001（17）

// 判断是否包含某优先级：按位与
(lanes & SyncLane) !== 0; // true = 包含同步任务