提高网站性能是增强用户体验和确保可靠、响应灵敏的界面的关键一步。如果您正在开发包含一些资源密集型组件的 react 或 next.js 项目，那么很自然会担心它们对性能的影响。这就是 react 中的记忆化的用武之地——它有助于加快这些“昂贵”组件的速度，从而为用户带来更流畅的体验。
在本文中，我将介绍记忆化并介绍可以优化应用程序性能的 react hooks，例如 usememo()、usecallback() 和 react.memo 高阶组件 (hoc)。让我们开始吧！
react 中的记忆化是什么？
记忆化是一种通过缓存计算任务（例如函数调用）的结果来加速程序的技术，这样，如果再次提供相同的输入，则返回缓存的结果而不是重新计算它。
usememo hook：在 react 中缓存结果
usememo 是一个钩子，可以在重新渲染或更新组件之间缓存或记忆函数的结果。
因此，通过使用此钩子，您可以缓存组件中函数的结果，并且在下次重新渲染时，如果该函数的输入未更改，您的组件将使用缓存结果。
如何实现 usememo：
usememo 是一个挂钩，它将未优化的函数作为回调和依赖项列表。然后 react 决定何时在初始渲染期间或后续重新渲染时调用此函数。
初始渲染：在初始渲染期间，react 会调用 usememo 函数来计算并存储您提供的回调函数的结果。
重新渲染：重新渲染时，react 调用 usememo 来检查依赖项是否已更改。如果依赖项没有更改，react 会重用上次渲染期间存储的缓存值。但是，如果依赖项发生了变化，usememo 会再次调用回调函数来重新计算更新后的值并将其存储在缓存中。
示例：
import react, { usememo } from 'react';
const mycomponent = ({ number }) => {
const squarednumber = usememo(() => number * number, [number]);
return squared number: {squarednumber};
};
squarednumber 仅当数字发生变化时才计算。 usememo 会缓存此计算，因此不会在每次渲染时进行不必要的重新计算。
usecallback hook：缓存函数定义
usecallback 是一个钩子，用于缓存或记忆组件重新渲染或更新之间的函数定义。
通过使用这个钩子，你可以在重新渲染时存储函数的定义，因此只要函数的依赖项没有改变，react就会重用这个缓存的版本。
如何实现usecallback：
usecallback 是一个挂钩，它接受一个函数（作为回调）和一个依赖项列表。然后，react 决定何时返回（而不是调用）此函数 - 无论是在初始渲染期间还是在后续重新渲染期间。
初始渲染：在初始渲染期间，react 调用 usecallback 来存储您作为回调传递的函数。
重新渲染：重新渲染时，react 调用 usecallback 来检查依赖项是否已更改。如果依赖项没有更改，react 会重用上次渲染期间存储的缓存函数。如果依赖项发生更改，usecallback 将存储并返回更新后的函数。
示例：
import react, { usestate, usecallback } from 'react';
const mycomponent = () => {
const [count, setcount] = usestate(0);
const [multiplier, setmultiplier] = usestate(2);
// memoize the callback with `count` as a dependency
const calculate = usecallback(() => {
console.log("calculating:", count * multiplier);
}, [count]);
return (
count: {count}
multiplier: {multiplier}
);
};
export default mycomponent;
react.memo 函数：防止不必要的重新渲染
正如你所知，当你有父组件和子组件时，对父组件的 state 或 props 的任何更新都会导致其所有子组件重新渲染。在小型项目中，这可能不是问题，但在更大、更复杂的应用程序中，子组件不必要的重新渲染可能会影响性能。为了解决这个问题，react 提供了 memo() 函数。
memo（或 react.memo）函数允许您包装组件以防止其在父级更新时重新渲染。被包装的组件只有在其自身的 props 或 state 改变时才会重新渲染。
当你第一次在组件上调用 memo() 时，react 会渲染并缓存该组件。在后续渲染中，只要组件的 props 和状态没有改变，react 就会使用这个缓存的版本。请记住，memo() 仅避免重新渲染未更改的 props 和状态 - 一旦它们发生更改，memo() 就会相应地重新渲染并更新缓存的组件。
如何实现 react.memo：
要在组件中实现 memo，只需使用 memo() 或 react.memo() 包装您想要防止不必要的重新渲染的组件：
import react from 'react';
const mycomponent = ({ data }) => {
return {data.value};
};
export default react.memo(mycomponent);
注意：
如果将一个对象作为 prop 传递给包装在 memo() 中的组件，则即使该对象没有更改，该组件仍将在每次更新时重新渲染。发生这种情况是因为 react 使用 object.is 来比较先前和当前的 props。虽然 object.is(3, 3) 返回 true，但 object.is({}, {}) 返回 false，因为两个不同的对象引用永远不会被视为相等。
为了避免这种情况，您可以使用 usememo 来缓存对象并在渲染之间保持相同的引用：
import React, { useMemo } from 'react';
import MyComponent from './MyComponent';
const ParentComponent = () => {
const data = useMemo(() => ({ value: "Hello" }), []); // Cached object reference
return
在此示例中，usememo 确保数据对象具有相同的引用，从而防止 mycomponent 不必要的重新渲染。
感谢您阅读我的文章！如果您想了解有关 next.js、react、javascript 等的更多信息，请随时关注我的网站：saeed-niyabati.ir。如有任何问题，请随时与我们联系。下次见！
