Memo和useemo

"Memo"通常是指在编程中的一种优化技术，特别是在函数式编程和React等框架中，用于缓存计算结果，避免重复计算。当你对某个函数的结果进行多次调用，并且函数的输入参数相同，Memo会记住之前的结果，下次直接返回，提高性能。

`useMemo`是React Hook中的一个函数，它允许你在组件内部创建一个懒于计算或长时间运行的副作用。当你提供一个依赖数组，`useMemo`会在组件渲染时根据依赖数组的变化来重新计算memoized value，如果依赖不变，则返回上一次的结果，避免不必要的重渲染。

使用`useMemo`的例子：

import { useMemo } from 'react';

function HeavyComputation(data) {
  // 这是一个耗时的计算
  const result = complexCalculation(data);
  return result;
}

function MyComponent() {
  const computedValue = useMemo(() => HeavyComputation(myData), [myData]); // 如果myData改变，computedValue才会重新计算
  return <div>{computedValue}</div>;
}

相关问题

memo 和usememo

`memo` 和 `usememo` 是React Hooks库（如`react.memo`或`useMemo`）中的两个函数，它们用于优化性能，特别是当组件的纯度（PureComponent）无法保证时。

1. **`memo`**: 这是一个高阶函数，通常作为HOC（Higher Order Component）的形式存在，用于包装组件。它会检查组件的props是否改变，如果没变则返回上一次渲染的结果，避免不必要的重新渲染。`memo`在`@reactjs/redux`等库中也有所应用。

   const EnhancedComponent = memo(Component);

2. **`useMemo`**: React的内置Hook，允许你在副作用函数（如计算、订阅等）中缓存结果。只有当依赖数组的内容发生变化时，才会重新计算并更新这个值。这对于需要大量计算或订阅操作的组件非常有用，可以提高性能。

   function MyComponent() {
     const expensiveCalculation = useMemo(() => calculateSomething(), [someDependency]);
     // ...
   }

let memo = [] as any if (baseSetting.value.memo_source === 1) { memo = orderMemoList.value } else if (baseSetting.value.memo_source === 2) { invoiceDetail.value.forEach(item => { memo.push(item.memo) }) } else { memo = orderMemoList.value invoiceDetail.value.forEach(item => { memo.push(item.memo) }) } memo = memo.filter(iv => iv !== null) if (baseSetting.value.memo_merge === 1) { memo = Array.from(new Set(memo)) } memo = memo.join(',') invoiceData.value.memo = memo.substr(0, 130) 优化这段代码，memo值为空时，没有，

可以使用三元表达式来判断 `memo` 数组是否为空，如果为空则将其赋值为一个空数组 `[]`，这样就可以避免在 `memo` 为空时调用 `join()` 方法产生的问题。下面是优化后的代码：

let memo: string[] = [];
if (baseSetting.value.memo_source === 1) {
  memo = orderMemoList.value || [];
} else if (baseSetting.value.memo_source === 2) {
  memo = invoiceDetail.value.map(item => item.memo);
} else {
  memo = (orderMemoList.value || []).concat(invoiceDetail.value.map(item => item.memo));
}
memo = memo.filter(iv => iv !== null);
if (baseSetting.value.memo_merge === 1) {
  memo = Array.from(new Set(memo));
}
memo = memo.join(',');
invoiceData.value.memo = memo.substr(0, 130);

这样修改之后，当 `memo` 为空时，不会调用 `join()` 方法，也不会产生问题。