什么是 React 快速刷新？

朋友们好，欢迎来到Blogvent第三天！

如果你关注过最新的 React 更新或 Next.js v10，很可能已经看到过“快速刷新”这个术语。这项新功能对用户的影响不大，但却能显著提升开发者的体验。

React Fast Refresh 取代了 React Hot Loader。之前的 React Hot Loader 并不完美，它独立于 React 之外，导致了一些不太理想的调试体验。而 React Fast Refresh 则拥有更新的 API，速度更快，错误处理更完善，并且在重新渲染时能够保留状态。

那这意味着什么呢？假设你有一个简单的计数器元件：

import { useState } from 'react';

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

  return (
    <>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

假设你点击了“计数！”按钮 5 次，然后你决定添加一个简单的更改，比如添加一行新代码。

import { useState } from 'react';

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

  return (
    <>
      <h1>Counter Example</h1>
      <p>You clicked the button {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Count!
      </button>
    </>
  );

在这个例子中，如果您之前没有启用快速刷新功能，那么您需要点击按钮 5 次才能看到之前的状态。而现在启用快速刷新后，点击次数将始终保持在 5 次！

这显然是一个非常简单的例子，但如果你想想游戏状态、用户偏好、表单、客户端导航……这里有很多问题，而快速刷新可以解决这些问题！

它还会在语法或运行时错误解决后自动重新加载页面，并在您更新 React 树之外的内容时执行完全重新加载（因为它与 React 本身集成得更深）。请注意，快速刷新默认仅适用于函数组件，不适用于类组件。

我想试试！

如果您想查看一个 Next.js v10+ 的入门项目（已自动启用快速刷新），请查看此仓库；或者点击下面的按钮，立即克隆并部署一个新的 Next.js 项目：