解析 ‘Functional Programming’ 原则在 React 中的约束：为什么纯函数对于并发模式至关重要？

各位同仁，各位技术爱好者，欢迎来到今天的讲座。今天我们将深入探讨一个在现代前端开发中至关重要的话题：函数式编程（Functional Programming, FP）原则，特别关注纯函数（Pure Functions）在React应用中的约束，以及它们为何对于实现高效且可预测的并发模式至关重要。

React，作为声明式UI库的代表，从其诞生之初就深受函数式编程思想的影响。从组件本身被设计为输入props输出UI的纯函数，到状态管理、副作用处理，无不体现着FP的影子。随着React 18引入并发渲染（Concurrent Rendering）机制，纯函数的重要性被提升到了前所未有的高度。理解并严格遵循纯函数原则，不再仅仅是代码风格的选择，而是构建高性能、响应式用户界面的基石。

一、 函数式编程的基石与React的融合

在深入纯函数与并发模式之前，我们首先需要回顾一下函数式编程的核心概念，以及React是如何巧妙地将这些概念融入其架构中的。

1.1 函数式编程的核心原则

函数式编程是一种编程范式，它将计算视为数学函数的求值，并避免使用可变状态和副作用。其核心原则包括：

• 纯函数 (Pure Functions)：这是FP的灵魂。纯函数在给定相同输入时，总是产生相同输出，并且不产生任何可观察的副作用。
• 不可变性 (Immutability)：数据一旦创建就不能被修改。任何对数据的“修改”操作都会返回一个新的数据副本，而不是原地修改原始数据。
• 头等函数 (First-Class Functions)：函数可以像普通变量一样被传递、赋值、作为参数或返回值。
• 高阶函数 (Higher-Order Functions)：接受函数作为参数或返回函数的函数。
• 声明式编程 (Declarative Programming)：关注“做什么”而不是“如何做”，将实现细节交给底层框架。

1.2 React对函数式编程的拥抱

React的设计哲学与FP原则高度契合，尤其是在以下几个方面：

• 组件即函数 (Components as Functions)：在函数式组件盛行的今天，组件本质上就是接收props（不可变输入）并返回描述UI的JSX（输出）的纯函数。
• 不可变的状态更新 (Immutable State Updates)：React鼓励通过setState或useState的更新函数来创建新的状态对象，而不是直接修改现有状态。例如，setState(prevState => ({ ...prevState, counter: prevState.counter + 1 }))。
• 声明式UI (Declarative UI)：开发者描述UI在给定状态下的外观，而不是编写指令来一步步修改DOM。React负责将声明的UI高效地渲染到浏览器。
• 副作用的隔离 (Side Effect Isolation)：React提供了useEffect Hook，明确地将副作用（如数据获取、订阅、DOM操作）从组件的渲染逻辑中分离出来，并在特定的生命周期阶段执行。

// 示例：React中的函数式组件
import React, { useState, useEffect } from 'react';

// 这是一个纯函数组件 (理想情况下，其渲染逻辑是纯的)
function Greeting({ name }) {
  // props 是不可变的输入
  return <h1>Hello, {name}!</h1>; // 返回 JSX (描述 UI 的输出)
}

// 这是一个包含状态和副作用的组件
function Counter() {
  const [count, setCount] = useState(0); // 状态更新是不可变的

  // useEffect 用于处理副作用
  useEffect(() => {
    document.title = `You clicked ${count} times`; // 副作用：修改文档标题
    console.log(`Current count: ${count}`); // 副作用：日志输出
  }, [count]); // 依赖项数组，确保副作用在 count 变化时才执行

  const increment = () => {
    // 状态更新，返回新对象/值
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button> {/* 事件处理函数 */}
      <Greeting name="React User" />
    </div>
  );
}

在上述Counter组件中，Greeting组件是一个典型的纯函数组件。Counter组件本身虽然管理状态并有副作用，但其核心的渲染逻辑（return语句内的JSX）仍然是基于当前count值的纯计算。副作用被useEffect封装和隔离。

二、 纯函数的深度解析

纯函数是函数式编程的核心，也是理解React并发模式的关键。我们来详细剖析它。

2.1 纯函数的定义与特征

一个函数如果满足以下两个条件，则称之为纯函数：

1. 给定相同的输入，总是返回相同的输出 (Deterministic)：无论调用多少次，只要输入不变，输出就永远不变。
2. 不会产生任何可观察的副作用 (No Side Effects)：它不会修改外部状态、不进行I/O操作、不改变传入的参数、不抛出异常（除非异常是其计算结果的一部分）。

纯函数的示例：

// 纯函数：给定相同输入，总是返回相同输出，无副作用
function add(a, b) {
  return a + b;
}

// 纯函数：不会修改原始数组，而是返回一个新数组
function capitalizeWords(words) {
  return words.map(word => word.toUpperCase());
}

const numbers = [1, 2, 3];
console.log(add(numbers[0], numbers[1])); // 3
console.log(add(numbers[0], numbers[1])); // 3 (输入不变，输出不变)

const originalWords = ['hello', 'world'];
const capitalized = capitalizeWords(originalWords);
console.log(capitalized);    // ['HELLO', 'WORLD']
console.log(originalWords);  // ['hello', 'world'] (原始数组未被修改)

非纯函数的示例：

let total = 0; // 外部状态

// 非纯函数：修改了外部状态 (副作用)
function addToTotal(value) {
  total += value;
  return total;
}

// 非纯函数：依赖外部状态 (Math.random())，每次调用可能返回不同结果
function getRandomNumber() {
  return Math.random();
}

// 非纯函数：修改了传入的参数 (副作用)
function pushToArray(arr, item) {
  arr.push(item);
  return arr;
}

console.log(addToTotal(5)); // total 变为 5
console.log(addToTotal(5)); // total 变为 10 (相同输入，不同输出，因为外部状态被修改)

console.log(getRandomNumber()); // 0.123...
console.log(getRandomNumber()); // 0.456... (相同输入，不同输出)

const myArr = [1, 2];
console.log(pushToArray(myArr, 3)); // [1, 2, 3]
console.log(myArr);                 // [1, 2, 3] (原始数组被修改)

2.2 为什么纯函数如此重要？

纯函数带来了多方面的好处，这些好处在构建复杂应用时尤为突出：

1. 可预测性 (Predictability)：由于输出完全由输入决定，纯函数的行为是完全可预测的。这大大降低了心智负担，使代码更易于理解。
2. 可测试性 (Testability)：测试纯函数非常简单。你只需要提供一组输入，然后断言输出是否符合预期。不需要复杂的设置（setup）和清理（teardown），不需要模拟（mock）外部依赖。
3. 可缓存性 (Cacheability / Memoization)：如果一个纯函数被多次调用且输入相同，我们可以缓存其结果，避免重复计算。React的useMemo和useCallback Hooks就是基于此原理。
4. 并发安全 (Concurrency Safety)：这是今天讲座的重点。由于纯函数不修改任何外部状态，它们可以安全地在多线程或并发环境中并行执行，而不会导致竞态条件（race conditions）或数据不一致问题。
5. 可组合性 (Composability)：纯函数是模块化的，它们可以很容易地组合起来构建更复杂的逻辑，而不用担心相互影响。
6. 调试友好 (Debuggability)：当程序出现问题时，纯函数更容易定位错误。你可以通过检查输入和输出，快速找出问题所在，因为你排除了副作用的干扰。

2.3 React中纯函数的应用边界：渲染阶段的纯洁性

在React中，纯函数原则尤其适用于组件的渲染阶段。React期望其组件的渲染逻辑（即函数组件的函数体，或类组件的render方法）是纯粹的。这意味着：

• 不要在渲染过程中修改组件的props或state：props是只读的，state应通过setState或useState的更新函数来更新，且这些更新是异步调度、非直接修改的。
• 不要在渲染过程中执行副作用：例如，不要直接修改DOM、发送网络请求、设置定时器或打印日志（除非是调试性的console.log，但即便如此，也应注意其在并发模式下的重复执行）。
• 不要在渲染过程中修改外部变量：这会引入难以追踪的全局状态依赖。

渲染阶段的非纯行为示例：

import React, { useState } from 'react';

let globalCount = 0; // 外部状态

function ImpureComponentRender({ value }) {
  // 错误示范1：在渲染过程中修改外部变量
  globalCount += 1;
  console.log('Rendering ImpureComponentRender, globalCount:', globalCount);

  // 错误示范2：在渲染过程中修改 props (即便可以，也应该避免，因为 props 是只读的)
  // value.modified = true; // 假设 value 是一个对象

  // 错误示范3：在渲染过程中执行副作用，例如网络请求 (这会导致无限循环或性能问题)
  // fetch('/api/data').then(...);

  const [localState, setLocalState] = useState(0);
  // 错误示范4：在渲染过程中直接修改 state (这将导致无限重渲染)
  // setLocalState(localState + 1);

  return (
    <div>
      <p>Value: {value}</p>
      <p>Global Count in Render: {globalCount}</p>
      <p>Local State: {localState}</p>
    </div>
  );
}

上述代码中的所有“错误示范”都会在React的并发模式下引发严重问题，甚至在非并发模式下也会导致不可预测的行为、无限循环或性能瓶颈。React可能会多次调用渲染函数，如果每次调用都产生副作用，那么这些副作用就会被重复执行，导致应用行为混乱。

正确的副作用处理方式：

import React, { useState, useEffect } from 'react';

function PureishComponent({ userId }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  // 正确：将数据获取（副作用）放在 useEffect 中
  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUserData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching user data:", error);
        setLoading(false);
      });

    // 返回一个清理函数（如果需要）
    return () => {
      // 例如取消请求或清除订阅
    };
  }, [userId]); // 依赖项数组确保只在 userId 变化时重新运行 effect

  if (loading) {
    return <p>Loading user data...</p>;
  }

  if (!userData) {
    return <p>User not found.</p>;
  }

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {userData.name}</p>
      <p>Email: {userData.email}</p>
    </div>
  );
}

在这个正确的示例中，PureishComponent的渲染逻辑（return语句内的JSX）仍然是纯粹的，它只是根据userData和loading这两个状态值来决定显示什么。所有与外部世界交互的副作用都被封装在useEffect中，并由React在渲染之后的一个专门阶段进行调度和执行。

三、 UI并发的挑战与React的响应

传统的前端开发模型往往是单线程、阻塞式的。当有大量计算或数据加载时，UI会变得卡顿，用户体验极差。并发模式旨在解决这一问题，允许应用同时处理多个任务，从而保持UI的响应性。

3.1 传统UI的并发困境

在没有良好并发支持的UI框架中，处理复杂任务时会遇到以下挑战：

• 主线程阻塞 (Main Thread Blocking)：JavaScript是单线程的。耗时操作（如大型数据处理、复杂DOM操作）会阻塞主线程，导致UI无响应（“冻结”）。
• 竞态条件 (Race Conditions)：当多个异步操作试图同时修改同一个状态时，最终结果可能依赖于这些操作完成的顺序，导致不可预测的错误。
• 状态不一致 (Inconsistent State)：在复杂的用户交互中，如果UI更新不是原子性的，用户可能会看到中间的、不一致的UI状态。
• 调试困难 (Debugging Difficulty)：异步和并发问题通常难以复现和调试，因为它们往往与时间、顺序和外部环境有关。

3.2 React 18+的并发渲染模式

React 18引入了并发渲染（Concurrent Rendering）机制，其核心思想是让React能够中断、暂停、恢复甚至废弃渲染工作，从而在不阻塞主线程的情况下，优先处理高优先级的更新（如用户输入），并平滑地过渡低优先级的更新。

React并发模式的关键特性：

• 可中断渲染 (Interruptible Rendering)：React可以在渲染过程中暂停，让浏览器处理更紧急的任务（如用户输入），之后再恢复渲染。
• 时间切片 (Time Slicing)：React将渲染工作分解为小块，并允许浏览器在这些小块之间进行调度，从而避免长时间阻塞。
• 优先级更新 (Prioritized Updates)：不同的更新可以有不同的优先级。例如，用户输入（如文本框输入）具有高优先级，而数据加载后的列表更新可能具有低优先级。
• 可重入性 (Re-entrant)：React的渲染函数可能会被多次调用，或者在一次调用中被中断后重新开始。

React提供的并发API：

• startTransition / useTransition：用于将某些状态更新标记为“过渡”（transitions）。过渡更新是可中断的、低优先级的，React会尽可能地在后台处理它们，同时保持UI的响应性。
• useDeferredValue：用于延迟更新一个值。当父组件的某个值变化时，useDeferredValue会返回一个旧的值，直到React有空闲时间来渲染新值。

import React, { useState, useTransition, useDeferredValue } from 'react';

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const [query, setQuery] = useState(''); // 用于实际搜索的 query
  const [isPending, startTransition] = useTransition(); // 标记过渡更新

  // useDeferredValue 延迟 query 的更新，直到 React 有空闲时间
  const deferredQuery = useDeferredValue(query);

  const handleChange = (e) => {
    setInputValue(e.target.value);

    // 将 setQuery 放在 startTransition 中，标记为低优先级
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      {isPending && <span>Updating...</span>}
      <SearchResults query={deferredQuery} /> {/* 使用延迟的 query */}
    </div>
  );
}

function SearchResults({ query }) {
  // 模拟一个耗时的数据过滤或渲染
  const heavyCompute = (q) => {
    console.log(`Performing heavy compute for query: ${q}`);
    const items = Array.from({ length: 2000 }, (_, i) => `Item ${i} for ${q}`);
    return items.filter(item => item.includes(q));
  };

  const results = heavyCompute(query); // 假设这是一个纯计算

  return (
    <div>
      <h3>Search Results for "{query}"</h3>
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

在SearchInput组件中，当用户输入时，setInputValue是立即的、高优先级的更新，确保输入框内容立即响应。而setQuery被包裹在startTransition中，这意味着React会在后台处理这个更新。如果用户在SearchResults组件完成渲染前继续输入，React可以中断SearchResults的渲染，优先响应新的输入，然后再处理新的搜索结果。useDeferredValue(query)则进一步确保了SearchResults组件接收到的query值是稳定的，即使query在后台发生了多次更新。

四、 纯函数：并发模式的基石

现在，我们终于来到了本次讲座的核心：为什么纯函数对于React的并发模式至关重要？

React的并发渲染机制，尤其是其可中断、可重入的特性，对组件的渲染行为提出了严格的要求。如果组件的渲染函数不是纯函数，那么并发模式将无法安全地工作，甚至会导致灾难性的后果。

4.1 可中断性与可重入性要求渲染阶段无副作用

设想一下，如果React在渲染一个组件时，该组件的渲染函数内部执行了一个副作用（比如修改了全局变量或发送了网络请求）：

1. 中断与恢复：React开始渲染组件A。在渲染过程中，用户触发了一个高优先级的事件。React中断了组件A的渲染。此时，如果组件A的渲染函数已经执行了一部分副作用，那么这些副作用就“悬在半空”了。当React稍后恢复组件A的渲染时，或者甚至决定废弃当前渲染并从头开始一个新的渲染时，之前已经执行的副作用可能已经造成了不可逆的破坏，或者导致状态不一致。
2. 重复执行：在并发模式下，React可能会多次尝试渲染同一个组件，或者渲染同一个组件的不同版本。如果每次渲染都会产生副作用，那么这些副作用就会被重复执行，导致意料之外的行为。例如，一个在渲染函数中发送网络请求的组件，可能会在用户输入时被中断并重新渲染，导致请求被发送多次。

纯函数完美解决了这些问题：

• 幂等性 (Idempotence)：纯函数的渲染是幂等的。无论渲染函数被调用多少次，只要props和state不变，它总是产生相同的虚拟DOM树。React可以安全地中断它，稍后再重新启动，或者甚至完全废弃当前未完成的工作，而无需担心留下不一致的中间状态或重复执行有害的操作。
• 无副作用 (No Side Effects)：由于纯函数不修改外部状态，也不执行I/O操作，因此在渲染阶段它们不会对应用程序的外部环境造成任何影响。这意味着React可以自由地暂停、恢复或废弃渲染工作，而不会破坏应用程序的整体状态。

4.2 时间切片与优先级更新依赖于纯净的计算

React的时间切片和优先级更新机制，其基础是能够将渲染工作分解成小的、可管理、可中断的单元。这些单元必须是纯粹的计算，才能被安全地调度。

当React决定优先处理一个高优先级更新时，它可能会放弃当前正在进行的低优先级渲染工作。如果这个被放弃的工作包含了副作用，那么这些副作用就无法被撤销，从而导致应用状态的混乱。但如果渲染工作是纯粹的，React可以简单地丢弃已计算出的部分虚拟DOM，然后从头开始或从某个检查点开始新的高优先级渲染，而不会有任何负面影响。

4.3 不可变性与状态快照

纯函数通常与不可变性原则紧密相连。在React中，当我们更新状态时（例如setCount(count + 1)），我们实际上是创建了一个新的状态值，而不是修改旧值。这种不可变性对于并发模式至关重要：

• 状态快照 (State Snapshots)：React在开始渲染一个组件时，会“捕获”当前props和state的一个快照。并发渲染意味着在组件的整个渲染生命周期中，外部props或state可能会发生多次变化。如果渲染逻辑依赖于可变状态，那么在渲染过程中状态被外部修改，会导致计算结果不一致。通过使用不可变的状态快照，React可以确保组件在整个渲染过程中都使用一个稳定的、一致的输入集。
• 高效比较 (Efficient Comparison)：不可变性使得React可以非常高效地比较前后状态和props，以确定是否需要重新渲染，或者哪些部分需要更新。这对于虚拟DOM的协调（reconciliation）过程至关重要。

4.4 渲染阶段与副作用阶段的明确分离

React通过useEffect Hook，明确地将副作用的执行从组件的渲染阶段分离出来。

• 渲染阶段 (Render Phase)：这是组件函数实际执行并返回JSX的阶段。在这个阶段，React期望所有计算都是纯粹的，没有副作用。这是并发模式可以自由中断、暂停和重试的阶段。
• 副作用阶段 (Effect Phase)：在渲染完成后，并且DOM更新已经提交到浏览器之后，React才会执行useEffect中定义的副作用。这个阶段是不可中断的，因为副作用通常是与外部世界交互的、不可逆的操作。

这种严格的分离确保了React可以在渲染阶段尽情发挥并发的优势，而将所有可能破坏并发安全性的操作推迟到副作用阶段，并由React以受控的方式进行管理。

纯函数与并发模式的关系总结表：

特性	纯函数表现	并发模式依赖
可预测性	相同输入 -> 相同输出，易于理解和推理	React能预测渲染结果，安全地中断和重试
无副作用	不修改外部状态，不进行I/O	渲染过程可被暂停、废弃，不留下不一致的中间状态
幂等性	多次调用产生相同结果	React可重复执行渲染函数，无需担心重复副作用
不可变性	使用新值而非修改旧值	React能捕获稳定状态快照，安全地进行时间切片
可缓存性	结果可被缓存（Memoization）	提高并发渲染效率，避免重复计算
并发安全	无竞态条件，无数据不一致	渲染逻辑可并行执行，不相互干扰

五、 实践中的纯函数与并发最佳实践

理解了纯函数对于并发模式的重要性后，我们如何在日常开发中更好地实践它呢？

5.1 保持组件渲染逻辑的纯粹性

• 只读Props和State：永远不要在组件内部修改传入的props。对于state，始终使用setState或useState的更新函数，并且返回新的状态对象/值，而不是直接修改旧的状态。

  // 错误示范：修改props
  function BadComponent({ user }) {
    // user.name = 'New Name'; // ❌ 绝不能直接修改 props
    return <div>Hello, {user.name}</div>;
  }
  
  // 错误示范：直接修改state
  function AnotherBadComponent() {
    const [count, setCount] = useState(0);
    // count++; // ❌ 绝不能直接修改 state 变量
    return <button onClick={() => setCount(count + 1)}>Increment</button>;
  }
  
  // 正确示范
  function GoodComponent({ user }) {
    const [localUser, setLocalUser] = useState(user); // 如果需要修改，复制一份到内部状态
    return (
      <div>
        Hello, {localUser.name}
        <button onClick={() => setLocalUser(prev => ({ ...prev, name: 'New Name' }))}>
          Change Local Name
        </button>
      </div>
    );
  }

• 避免在渲染函数中执行副作用：将所有数据获取、DOM操作、订阅、定时器等操作封装在useEffect中。

  // 错误示范：在渲染中进行网络请求
  function DataFetcher({ id }) {
    // const data = fetch(`/api/items/${id}`).then(res => res.json()); // ❌ 每次渲染都会触发请求
    // ...
    return <div>Data: ...</div>;
  }
  
  // 正确示范
  function DataFetcherGood({ id }) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      setLoading(true);
      fetch(`/api/items/${id}`)
        .then(res => res.json())
        .then(setData)
        .catch(error => console.error(error))
        .finally(() => setLoading(false));
    }, [id]); // 依赖 id，只在 id 变化时请求
  
    if (loading) return <p>Loading...</p>;
    return <div>Data: {JSON.stringify(data)}</div>;
  }

• 使用useMemo和useCallback进行优化：对于昂贵的计算或回调函数，如果它们的依赖项没有改变，可以使用这些Hooks来缓存结果，避免在每次渲染时重复计算或创建新的函数实例。这不仅提升性能，也进一步强化了纯函数的思想。

  import React, { useMemo, useCallback, useState } from 'react';
  
  function MyComponent({ items, filterText }) {
    const [count, setCount] = useState(0);
  
    // 昂贵的纯计算，只在 items 或 filterText 变化时重新计算
    const filteredItems = useMemo(() => {
      console.log('Performing heavy filtering...');
      return items.filter(item => item.includes(filterText));
    }, [items, filterText]);
  
    // 回调函数，只在 count 变化时重新创建
    const handleClick = useCallback(() => {
      setCount(prev => prev + 1);
    }, []); // 空依赖数组表示只创建一次
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment Count</button>
        <ul>
          {filteredItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }

5.2 拥抱不可变数据结构

• 手动复制：对于对象和数组，在更新时始终创建新副本。

  // 更新对象
  const user = { name: 'Alice', age: 30 };
  const updatedUser = { ...user, age: 31 }; // 使用扩展运算符创建新对象
  
  // 更新数组
  const numbers = [1, 2, 3];
  const newNumbers = [...numbers, 4]; // 使用扩展运算符创建新数组
  const mappedNumbers = numbers.map(num => num * 2); // map 返回新数组

• 使用不可变库：对于复杂的嵌套数据结构，手动管理不可变性可能会变得繁琐。可以使用Immer.js等库来简化操作。Immer允许你以“可变”的方式编写代码，但它会在后台为你处理不可变更新，返回一个新对象。

  import produce from 'immer';
  
  const state = {
    user: {
      name: 'John',
      address: {
        city: 'New York',
        zip: '10001',
      },
    },
    posts: [{ id: 1, title: 'Post 1' }],
  };
  
  const newState = produce(state, draft => {
    draft.user.address.zip = '10002'; // 以可变方式操作 draft
    draft.posts.push({ id: 2, title: 'Post 2' });
  });
  
  console.log(state === newState);             // false (返回了新对象)
  console.log(state.user === newState.user);     // false
  console.log(state.user.address === newState.user.address); // false
  console.log(state.posts === newState.posts);   // false

5.3 隔离和管理副作用

• useEffect是你的朋友：任何与外部世界交互的操作都应该放在useEffect中。仔细管理useEffect的依赖项数组，确保副作用只在需要时运行，并且在组件卸载或依赖项变化时正确清理。
• 事件处理器中的副作用：用户交互（如点击按钮、提交表单）触发的副作用可以放在事件处理器中，因为它们通常是用户明确触发的、一次性的操作，不会在渲染过程中被重复执行。

  function SaveButton({ data }) {
    const handleClick = () => {
      // 副作用：发送数据到服务器
      fetch('/api/save', { method: 'POST', body: JSON.stringify(data) })
        .then(response => response.json())
        .then(result => console.log('Saved:', result))
        .catch(error => console.error('Error saving:', error));
    };
    return <button onClick={handleClick}>Save</button>;
  }

5.4 善用React的并发API

• useTransition用于非紧急更新：当你有一个更新可能导致UI卡顿，但又不是用户立即需要的响应时（例如过滤列表、加载搜索结果），使用useTransition将它标记为低优先级。
• useDeferredValue延迟昂贵渲染：当某个值可能频繁变化，并且其变化会导致下游组件进行昂贵的渲染时，使用useDeferredValue来延迟该值的传播，直到React有空闲时间处理。

六、 纯函数与并发：构建响应式未来的关键

纯函数不仅仅是函数式编程的一种风格偏好，它更是React并发模式能够安全、高效运行的根本保障。通过确保组件的渲染逻辑是纯粹的，我们赋予了React调度器极大的自由度：它可以中断、恢复、甚至废弃渲染工作，而无需担心破坏应用状态或产生不可逆的副作用。

这种纯粹性使得React能够：

• 优化用户体验：即使在处理大量数据或复杂计算时，也能保持UI的响应性，避免卡顿。
• 简化调试：由于渲染过程是确定性的，更容易追踪和解决UI问题。
• 提高性能：通过时间切片和优先级调度，更有效地利用CPU资源。
• 构建更可靠的应用：消除因并发执行导致的竞态条件和状态不一致问题。

因此，作为React开发者，深入理解并严格遵循纯函数原则，将不可变的思维方式融入日常编码，并善用React提供的并发API，是构建高性能、可扩展且用户友好的现代Web应用的关键。这不仅是对React框架的尊重，更是对未来前端发展趋势的积极拥抱。