前端怎么封装react组件（七爪源码React.memo高阶组件）
前端怎么封装react组件（七爪源码React.memo高阶组件）请参见下面的示例。在我们的示例中，我们有一个打印 value1 的父组件和一个在浏览器显示上打印 value2 的子组件。现在，让我们考虑一个简单的例子来更准确地阐明这个概念。假设我们有一个父组件和一个子组件。现在，每当父组件由于自身状态变化而重新渲染时，子组件也会重新渲染，这是 React 的一个常见特性。在这里，子组件没有发生状态变化，这意味着子组件的不必要渲染会影响性能。为了解决这个问题，我们只需要将子组件包装在 React.memo 中，这样 React 就会使用之前的渲染结果。正如标题中提到的，React.memo 是一个高阶函数。它用于记忆我们组件的结果，这有助于提高我们的 React 应用程序的性能。简单来说，如果我们的组件为传递给它的相同 prop 值返回相同的结果，那么渲染相同的结果会破坏应用程序的性能。 React 备忘录是解决这个问题的方法。我们只需要将我们的组件包装
用一个例子详细解释 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/小程序/网站源码资源，请搜索"七爪网源码交易平台"！
