React中的useMemo和memo

引言

React是一个声明式的JavaScript库,用于构建用户界面。在开发过程中,性能优化是一个重要的方面。useMemomemo是React提供的工具,用于帮助开发者避免不必要的渲染和计算,从而提升应用性能。

问题背景

在React应用中,组件的重新渲染是一个常见现象。当组件的状态或属性发生变化时,React会重新渲染组件。但是,如果组件的某些计算或子组件在重新渲染时没有变化,这些计算或子组件的重新渲染就是不必要的,这会导致性能问题。

useMemomemo的作用

useMemomemo正是为了解决这类问题而设计的。它们可以避免组件或组件内部的计算在每次渲染时都执行,从而减少不必要的性能开销。

useMemo的语法规则和使用

useMemo是一个Hook,用于记忆化组件内部的计算。它的基本语法如下:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

这里,computeExpensiveValue是一个计算密集型或者开销较大的函数。useMemo确保这个函数只在ab发生变化时重新计算,否则返回上一次的计算结果。

使用注意事项

  • 仅当依赖项(即第二个参数数组中的值)发生变化时,useMemo中的函数才会执行。
  • 应谨慎使用useMemo,避免过度优化,因为记忆化的计算仍然会在依赖项变化时执行。

memo的语法规则和使用

memo是一个高阶组件,用于包装另一个组件,避免其不必要的渲染。它的基本语法如下:

const MyComponent = memo(function MyComponent(props) {
  /* 渲染逻辑 */
});

或者使用React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* 渲染逻辑 */
});

memo通过比较当前的props和上一次的props来决定是否重新渲染组件。

使用注意事项

  • memo仅比较props,不比较state或context。
  • 如果组件的props在两次渲染之间没有变化,组件将不会被重新渲染。

使用案例

使用useMemo的案例

假设我们有一个组件,它根据用户的输入计算并显示一个复杂的结果。我们可以使用useMemo来避免每次输入变化时都重新计算:

function ComplexCalculation({ input }) {
  const result = useMemo(() => {
    // 假设这是一个复杂的计算函数
    return complexCalculation(input);
  }, [input]);

  return <div>Result: {result}</div>;
}

 使用memo的案例

如果我们有一个组件,它根据props渲染一些内容,而这些内容在props没有变化时不需要重新渲染,我们可以使用memo

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

 总结

useMemomemo是React提供的强大工具,用于优化性能,避免不必要的计算和渲染。使用它们时,需要注意依赖项的变化,以及它们适用的场景。合理使用这些工具,可以显著提升React应用的性能和用户体验。

想了解更多相关案例以及快速助力开发可访问lien0219 (lien) (github.com)https://github.com/lien0219

test_deom是各种应用案例,也会持续更新一些功能函数封装,能直接投入使用助力开发,如果有兴趣可以stars一下 

功能函数可访问分享几个JS 工具函数-****博客https://blog.****.net/qq_53742640/article/details/136138325

useCallback讲解React中的useCallback-****博客 

上一篇:云服务器在 Web 应用程序中作用


下一篇:设置和取消Excel“打开密码”的3种方法