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