引言
React是一个声明式的JavaScript库，用于构建用户界面。在开发过程中，性能优化是一个重要的方面。useMemo和memo是React提供的工具，用于帮助开发者避免不必要的渲染和计算，从而提升应用性能。
问题背景
在React应用中，组件的重新渲染是一个常见现象。当组件的状态或属性发生变化时，React会重新渲染组件。但是，如果组件的某些计算或子组件在重新渲染时没有变化，这些计算或子组件的重新渲染就是不必要的，这会导致性能问题。
useMemo和memo的作用
useMemo和memo正是为了解决这类问题而设计的。它们可以避免组件或组件内部的计算在每次渲染时都执行，从而减少不必要的性能开销。
useMemo的语法规则和使用
useMemo是一个Hook，用于记忆化组件内部的计算。它的基本语法如下：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);这里，computeExpensiveValue是一个计算密集型或者开销较大的函数。useMemo确保这个函数只在a或b发生变化时重新计算，否则返回上一次的计算结果。
使用注意事项
- 仅当依赖项（即第二个参数数组中的值）发生变化时，
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>;
});总结
useMemo和memo是React提供的强大工具，用于优化性能，避免不必要的计算和渲染。使用它们时，需要注意依赖项的变化，以及它们适用的场景。合理使用这些工具，可以显著提升React应用的性能和用户体验。
想了解更多相关案例以及快速助力开发可访问lien0219 (lien) (github.com)
https://github.com/lien0219
test_deom是各种应用案例，也会持续更新一些功能函数封装，能直接投入使用助力开发，如果有兴趣可以stars一下
功能函数可访问分享几个JS 工具函数-CSDN博客https://blog.csdn.net/qq_53742640/article/details/136138325
