useMemo钩子函数
useMemo钩子函数用于在组件渲染过程中缓存计算结果，以避免重复计算。它的基本语法如下：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);- 第一个参数是一个函数，该函数用于计算需要缓存的值。
- 第二个参数是一个依赖数组，只有当数组中的值发生变化时，才会重新计算缓存的值。
例子：
假设我们有一个计算两个数之和的函数，并且我们希望在其中一个数发生变化时才重新计算和。我们可以使用useMemo来缓存计算结果，以提高性能：
import React, { useState, useMemo } from 'react';
function SumComponent({ num1, num2 }) {
const sum = useMemo(() => {
console.log('Calculating sum...');
return num1 + num2;
}, [num1, num2]);
return (
<div>
<p>Num1: {num1}</p>
<p>Num2: {num2}</p>
<p>Sum: {sum}</p>
</div>
);
}在上面的例子中，只有当num1或num2的值发生变化时，才会重新计算sum的值。当组件重新渲染时，如果num1和num2的值没有变化，那么之前计算的sum值将被直接使用，从而提高了性能。
useEffect钩子函数
useEffect钩子函数用于处理副作用操作，比如数据获取、订阅事件等。它的基本语法如下：
useEffect(() => {
// 副作用操作
return () => {
// 清除操作
};
}, [dependency]);- 第一个参数是一个函数，该函数包含要执行的副作用操作。
- 第二个参数是一个依赖数组，只有当数组中的值发生变化时，才会重新执行副作用操作。如果省略该参数，副作用操作将在每次组件渲染时都执行。
例子：
假设我们需要从服务器获取用户信息，并在组件渲染时进行一次性的数据获取操作。我们可以使用useEffect来处理这个副作用操作：
import React, { useState, useEffect } from 'react';
function UserComponent({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
console.log('Fetching user data...');
// 模拟异步获取用户信息
fetchUser(userId).then((data) => {
setUser(data);
});
// 清除操作，可选
return () => {
console.log('Cleaning up...');
// 清除订阅或其他资源
};
}, [userId]);
if (!user) {
return <p>Loading...</p>;
}
return (
<div>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
{/* 其他用户信息 */}
</div>
);
}在上面的例子中，当userId发生变化时，useEffect会执行副作用操作，即获取用户信息。同时，我们还可以在useEffect的返回函数中执行清除操作，以便在组件卸载时进行必要的资源清理。
useMemo和useEffect的区别和适用场景
- useMemo用于缓存计算结果，适用于需要根据依赖项进行复杂计算的场景，以避免重复计算。它可以提高React组件的性能。
- useEffect用于处理副作用操作，比如数据获取、订阅事件等。它适用于在组件渲染过程中执行一次性的或周期性的副作用操作。
区别：
- useMemo是在组件渲染过程中根据依赖项进行计算，并返回一个缓存的值。它只在依赖项发生变化时重新计算，可以避免不必要的重复计算。
- useEffect用于处理副作用操作，它会在组件渲染后执行，并且可以在依赖项变化时重新执行。它不会返回任何值，主要用于处理副作用操作和清除操作。
适用场景：
- useMemo适用于需要根据依赖项执行复杂计算的场景，例如根据输入值计算某个结果。它可以避免在每次渲染时都进行计算，提高性能。常见的使用场景包括数据转换、昂贵的计算和优化渲染。
- useEffect适用于处理副作用操作，比如数据获取、订阅事件、DOM操作等。它可以在组件渲染后执行一次性的副作用操作，并且可以在依赖项变化时重新执行副作用操作。常见的使用场景包括数据获取、订阅和取消订阅、DOM更新等。
