跳到主要内容

React 响应式原理

React 的响应式系统与 Vue 等其他框架的实现有所不同。React 采用的是基于声明式渲染和组件状态（state）的响应式更新机制。

在 React 中，当组件的状态（state）或属性（props）发生变化时，React 会重新渲染组件，以反映最新的状态。

开始
  ↓
状态变化
  ↓
调用 setState/useState
  ↓
触发重新渲染
  ↓
生成新的虚拟 DOM
  ↓
虚拟 DOM 比较（Diffing）
  ↓
确定更新
  ↓
批量更新 DOM
  ↓
调用生命周期方法/钩子
  ↓
结束

开始：组件状态发生变化。
调用 setState/useState：更新组件状态。
触发重新渲染：React 标记组件为需要更新。
生成新的虚拟 DOM：React 调用组件的 render 方法，生成新的虚拟 DOM 树。
虚拟 DOM 比较（Diffing）：React 对比新旧虚拟 DOM 树，找出差异。
确定更新：根据差异，React 确定实际 DOM 需要进行的最小化更新。
批量更新 DOM：React 执行实际 DOM 的更新操作。
调用生命周期方法/钩子：如 componentDidUpdate 或 useEffect，执行相关的副作用操作。
结束：完成响应式更新流程。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

组件状态（State）

React 组件的状态是响应式的核心。组件通过调用 setState 方法（类组件）或 useState 钩子函数（函数组件）来更新状态。当状态更新时，React 会重新渲染该组件及其子组件。

虚拟 DOM（Virtual DOM）

React 使用虚拟 DOM 来实现其响应式系统。虚拟 DOM 是真实 DOM 的轻量级表示，它允许 React 在内存中进行快速的 diff 计算，以确定实际 DOM 需要进行哪些最小化的更新。

Reconciliation（协调过程）

当组件状态发生变化时，React 会创建一个新的虚拟 DOM 树，并将其与上一次渲染的虚拟 DOM 树进行比较。这个过程称为协调（Reconciliation）。React 通过这种方式找出实际 DOM 需要进行的最小化更改，然后批量更新 DOM，从而提高性能。

更新过程

状态更新：当调用 setState 或更新状态钩子（如 useState）时，React 将排队进行状态更新。
渲染阶段：React 遍历组件树，为每个组件调用渲染函数，生成新的虚拟 DOM。
协调阶段：React 比较新旧虚拟 DOM 树，确定哪些部分发生了变化。
提交阶段：React 根据协调阶段的结果，批量更新实际 DOM。

React 的响应式系统基于组件状态和虚拟 DOM 的协调过程。通过将状态更改与视图更新分离，React 能够高效地更新 UI，只对实际发生变化的部分进行操作。这种基于声明式编程的响应式更新机制，使得开发者可以专注于状态管理，而不是如何操作 DOM。

React 的响应式原理强调了不可变性和函数式编程的概念，通过组件和状态的抽象，提供了一种高效且可预测的方式来构建用户界面。

组件状态（State）
虚拟 DOM（Virtual DOM）
Reconciliation（协调过程）
更新过程