七爪源码:React.memo—高阶组件

用一个例子详细解释 React.memo。

React 中的高阶组件是什么？

如 React Docs 中所述，高阶组件 (HOC) 是 React 中用于重用组件逻辑的高级技术。 HOC 不是 React API 的一部分，它只是一个以组件为参数并返回一个新组件的函数。

什么是 React.memo？

正如标题中提到的，React.memo 是一个高阶函数。它用于记忆我们组件的结果，这有助于提高我们的 React 应用程序的性能。

简单来说，如果我们的组件为传递给它的相同 prop 值返回相同的结果，那么渲染相同的结果会破坏应用程序的性能。 React 备忘录是解决这个问题的方法。我们只需要将我们的组件包装在对 React.memo 的调用中，因此 React 将跳过渲染组件，并重用之前渲染的结果。

例子

现在，让我们考虑一个简单的例子来更准确地阐明这个概念。假设我们有一个父组件和一个子组件。现在，每当父组件由于自身状态变化而重新渲染时，子组件也会重新渲染，这是 React 的一个常见特性。在这里，子组件没有发生状态变化，这意味着子组件的不必要渲染会影响性能。为了解决这个问题，我们只需要将子组件包装在 React.memo 中，这样 React 就会使用之前的渲染结果。

请参见下面的示例。在我们的示例中，我们有一个打印 value1 的父组件和一个在浏览器显示上打印 value2 的子组件。

在第一种情况下，不使用 Memo，子组件在两个值的变化时重新渲染，这称为性能不佳，因为子组件仅使用 value2 作为其 prop。

我们使用备忘录的第二个案例就是解决这个问题的方法。在这种情况下，我将子组件包装在 React Memo 中，因此它只会在 value2 更改时重新渲染。

父组件：

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
    const [value1, setValue1] = useState(0);
    const [value2, setValue2] = useState(0);
    // value1 and value2 both are the state variables of parent component.
    // So, changes in any of the values will trigger the parent component to re-render.
    return (
        <>
            <div>
                <div>
                    <h2>Value 1: {value1}</h2>
                    <button onClick={() => setValue1(value1 + 1)}>+</button>
                    {/* Button to increase the value1 */}
                </div>
                <div>
                    <Child count = {value2}/>
                    {/* Child component will render here */}
                    <button onClick={() => setValue2(value2 + 1)}>+</button>
                    {/* Button to increase the value2 */}
                </div>
            </div>
        </>
    );
}

export default Parent;

子组件：

案例 1：没有 React Memo 示例和输出

import React from "react";
// This is a child component, using value2 as a prop.
const Child = ({count}) => {
    console.log("This component re-rendered");
    // This will print on console to check when it gets re-render.
    return (
        <>
            <div>
                <h2>Value 2: {count}</h2>
            </div>
        </>
    )
}
export default Child;
// This is an export of the child component without Memo.

案例 2：使用 React Memo 示例和输出

import React from "react";
// This is a child component, using value2 as a prop.
const Child = ({count}) => {
    console.log("This component re-rendered");
    // This will print on console to check when it gets re-render.
    return (
        <>
            <div>
                <h2>Value 2: {count}</h2>
            </div>
        </>
    )
}
export default React.memo(Child);
// This is an export of the child component with Memo.

React.memo 与 useMemo()

React Memo 是一个以 React 组件为参数的 HOC，用于记忆传递给它的组件的结果。另一方面，useMemo() 是一个 React 钩子，它将接受一个函数和一个依赖数组，然后记住从传递给它的函数返回的值。如果您仍然感到困惑，请不要担心。去查看我关于 useMemo() 钩子的另一篇文章，它将帮助您了解两者之间的区别。

结论

本文的目的是了解 React.memo 的概念，React 中的高阶组件。我已经使用一个简单的父子组件示例演示了它的用例。我还附上了显示输出的视频。两种情况下的控制台输出都将帮助您跟踪子组件的重新渲染计数。我希望这篇文章能帮助你详细了解 React Memo。请关注我以阅读更多类似的有趣文章。

更多APP/小程序/网站源码资源，请搜索"七爪网源码交易平台"！

网站首页 > 基础教程正文

猜你喜欢

网站首页 > 基础教程 正文

七爪源码:React.memo—高阶组件

猜你喜欢

网站首页 > 基础教程正文