一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

什么是React Forget

本文为翻译作品,原文链接:What is react forget

React Forget 在 React Conf. 2021 期间被引入。

React Forget 是一个“自动记忆编译器”,能够自动化你的应用中所有的记忆化操作。

什么是记忆化?

在 web 开发中,记忆化是将数据(例如一个变量的值)存储在缓存中,然后在下次需要时(例如在页面或组件重新渲染时)检索这些信息的过程。

缓存是一个临时数据存储,用于保存数据,以便将来请求这些数据时能够更快地完成。

如果没有记忆化,每次组件或页面重新渲染时都需要重新计算这些信息,而不是直接从缓存中检索。这需要更多的计算能力,并且会对你的应用性能产生负面影响。😟

因此,记忆化的目的是通过提高效率和随后的性能来优化你的应用。😄

什么是React Forget

React 目前是如何处理记忆化的?

在 React 中,目前用于记忆化的两个主要钩子是:useMemo 和 useCallback。

useMemo

这个钩子允许你缓存一个函数输出的结果,并在需要时检索这些信息,而无需再次重新计算该值。

它接受两个参数:

  1. 一个计算你想要缓存的值的函数(例如一个数字计算)
  2. 一个依赖列表
// useMemo 简单示例

const num = 2;
const answer = useMemo(() => num + 1, [num]);

在上面这个非常简化的示例中,我们创建了一个名为 answer 的变量,它取值 num 并对其加 1。

通过使用 useMemo,这将缓存值 3。

此外,因为我们有依赖数组 [num],这意味着除非 num 改变,否则不会重新计算 answer。

因此,当页面或组件重新渲染但 num 的值没有改变时,我们将直接使用缓存的值。

正如所说,这是一个非常简化的示例,但想象一下 answer 是一个需要大量重计算的复杂函数。想象现在每次页面重新渲染时都重新计算这个值。这将无谓地减慢你的页面速度……这就是我们使用 useMemo 的原因 :)

useCallback

useCallback 钩子与 useMemo 非常相似。主要区别在于 useMemo 返回一个记忆化的值,而 useCallback 返回一个记忆化的函数。

这意味着它创建了回调函数的一个记忆化版本(而不是函数的值),这个版本只有在其依赖项更新时才会改变。

那么,我们什么时候使用 useCallback 而不是 useMemo 呢?

每次组件重新渲染时,它的函数都会被重新创建。这意味着即使函数本身没有改变——它只是在页面重新渲染时被重新创建,组件可能最终会重新渲染。

当你想防止组件重新渲染,除非其 props 发生变化时,useCallback 钩子非常有用:

// index.js

import { useState, useCallback } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
// Todos.js

import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

在上面的示例中,你可以看到 addTodo 被作为一个 prop 传递给 Todos 组件。这意味着每次 Todos 组件渲染时,addTodo 函数将被重新创建,这在计算上是很耗资源的。

然而,在这个示例中,我们使用了 useCallback 钩子,因此函数被缓存并重用,除非 todo 被更新。

React Forget

现在,我刚才告诉你的关于 useMemo 和 useCallback 的所有信息,在 React Forget 发布时可能会完全变得无关紧要!

虽然 useMemo 和 useCallback 目前在 React 中发挥着它们的作用,但它们也增加了开发者的心智负担,这就是 React Forget 在开发中的原因。

React Forget 是一个底层的,自动记忆化编译器,它将处理所有的记忆化操作,而开发者——你——根本不需要做任何事情。

通过计算机科学的魔法,React Forget 模拟了 JavaScript 规范和 React 的规则,以确定应用中的哪些部分应该被记忆化。

简单来说,这意味着它将自动检测出需要使用 useMemo 和 useCallback 的场景,所以你将不再需要考虑这些钩子,或者在特定情况下你需要使用哪一个。

想象一下,如果不需要添加所有手动的记忆化操作,你的代码将变得多么易读!

就是这么“简单”!

然而,React Forget 仍然是一个进行中的项目,发布日期尚未宣布。但至少现在你知道了 React Forget 是什么,以及当它发布时,它将如何惠及你的 web 应用程序。😎

原文链接:https://juejin.cn/post/7333149874710642703 作者:前端为什么

(0)
上一篇 2024年2月13日 上午10:00
下一篇 2024年2月13日 上午10:10

相关推荐

发表评论

登录后才能评论