useCallback 与 useMemo

useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据。
共同特点：
在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用，被标记的内容或函数在react 中取消刷新，一定程度上提升渲染性能。
区别：

1. useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
2. useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。 ```jsx import { useState, useMemo } from “react”;

function Info() { let [personalInfo, setPersonalInfo] = useState({ name: “kevin kang”, gender: “male”, });

function formatGender(gender) { console.log(“—-翻译性别—-“); return gender === “male” ? “男” : “女”; }

// 不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源 // 在性别不改变的情况下,设置无数次姓名,formatGender也只会执行一次(第一次渲染执行)

const gender = useMemo(() => { return formatGender(personalInfo.gender); }, [personalInfo.gender]); //第二个参数放置依赖值

console.log(“Render”); //表示一次渲染 return ( <>

export default Info;

``` 注： 先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。（不要过早的进行优化）