React Fast Refresh替代 Hot Loader

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仅适用于开箱即用的函数组件,而不是基于类的组件。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5212.html

发表评论

登录后才能评论