解码 React 源码：Concurrent 模式揭秘（上）

序言

为了提升用户体验，React 团队提出了 Concurrent 模式。Concurrent 模式可以在应用更新的同时保持浏览器对用户的响应，并根据用户的设备性能和网速进行适当的调整。

Legacy 模式与 Concurrent 模式

我们通过一个例子来看看 Legacy 模式和 Concurrent 模式之间的区别：

// Legacy 模式
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

在这个例子中，当用户点击按钮时，setCount 会被调用，从而更新 count 状态。在 Legacy 模式下，这个更新是同步的，这意味着它会阻塞浏览器对用户的响应。

// Concurrent 模式
function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

而在 Concurrent 模式下，setCount 被放在了 useEffect 中。这意味着它不会阻塞浏览器对用户的响应。当用户点击按钮时，浏览器会先执行 setCount，然后继续处理其他任务。当 useEffect 执行时，浏览器会将 count 状态更新到最新值。

Concurrent 模式的优势

Concurrent 模式具有以下优势：

• 提高用户体验：Concurrent 模式可以让应用在更新的同时保持对用户的响应，从而提高用户体验。
• 提高性能：Concurrent 模式可以根据用户的设备性能和网速进行适当的调整，从而提高性能。
• 提高可维护性：Concurrent 模式使代码更具可维护性，因为开发者可以将更新逻辑与渲染逻辑分开。

结语

Concurrent 模式是 React 的一个重要特性，它可以显著提高用户体验和性能。在本文中，我们介绍了 Concurrent 模式的基本原理，并通过一个例子演示了 Legacy 模式和 Concurrent 模式之间的区别。