React中的useMemo和memo

引言

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是一个高阶组件，用于包装另一个组件，避免其不必要的渲染。它的基本语法如下：

1. const MyComponent = memo(function MyComponent(props) {

2. /* 渲染逻辑 */

3. });

或者使用React.memo：

1. const MyComponent = React.memo(function MyComponent(props) {

2. /* 渲染逻辑 */

3. });

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

使用注意事项

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

使用案例

使用useMemo的案例

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

1. function ComplexCalculation({ input }) {

2. const result = useMemo(() => {

3. // 假设这是一个复杂的计算函数

4. return complexCalculation(input);

5. }, [input]);

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

8. }

 使用memo的案例

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

1. const MyComponent = React.memo(function MyComponent({ text }) {

2. return <div>{text}</div>;

3. });

 总结

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

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

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

功能函数可访问