React Fast Refresh替代 Hot Loader

如果您看过最新的React更新或Next.js v10，您可能已经看到了“Fast Refresh”这个术语。这是一个对用户影响不大的新特性，但它使开发人员的体验更好。

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>
    </>
  );

然后，假设你点击了“Count!”按钮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>
    </>
  );

在本例中，如果您想在没有Fast Refresh的情况下查看您的浏览器页面，则必须再次单击该按钮5次才能看到之前的状态。现在，通过Fast Refresh，计数将保持在5!

一旦语法或运行时错误得到解决，它还会自动重新加载页面，当您更新React树之外的内容时，它会完全重新加载页面(因为它与React本身集成得更深入)。

请记住，Fast Refresh仅适用于开箱即用的函数组件，而不是基于类的组件。