优化重新渲染性能的常见方法是跳过不必要的工作。 例如，可以告诉 React 重用缓存的计算，或者如果数据自上次渲染以来没有更改，则跳过重新渲染。
要跳过计算和不必要的重新渲染，请使用以下 Hooks 之一：
-
useMemo缓存计算结果。 -
useCallback缓存函数定义，再传递给优化组件。
要优先考虑渲染，请使用以下 Hooks 之一： -
useTransition将状态转换标记为非阻塞并允许其他更新中断它。 -
useDeferredValue可以推迟更新 UI 的非关键部分，并让其他部分先更新。
const cachedFn = useCallback(fn, dependencies)
定义
useCallback(fn, dependencies)
在组件中引用useCallback
import { useCallback } from 'react';
参数
fn: 想缓存的函数。该函数可以带参数并返回任意类型的值。返回一个函数定义，并不调用函数。dependencies: 监听的变量值的列表。变量值来控制第一个参数fn是否改变。
返回值
在初次渲染，usecallback返回fn，即第一个参数传递的函数。
再次渲染，react会通过Object.js比较两次dependiencies是否不同， 相同则返回上一次的函数，不同则更新函数。
用法
跳过组件重新渲染
import { useCallback, useState } from "react";
export function CallbackDemo({theme}: any) {
console.log("###callback");
const [name, setName] = useState("Layor");
function handleSubmit() {
console.log("###submit");
}
return (
<div>
<div onClick={() => setName("Tom")}>callback {name}</div>
<Form onSubmit={handleSubmit}></Form>
</div>
);
}
function Form({ onSubmit }: any) {
console.log("###form");
return <div onClick={onSubmit}>input form</div>;
}
控制台输出：
###callback
###callback
###form
###form
接下来，我们开始优化了。
首先使用memo将form组件包裹起来， 再callBackDemo中定义handleSubmit函数时使用useCallback
import { useCallback, useState, memo } from "react";
export function CallbackDemo({theme}: any) {
console.log("###callback");
const [name, setName] = useState("Layor");
const handleSubmit = useCallback(function handleSubmit() {
console.log("###submit");
},[theme])
return (
<div>
<div onClick={() => setName("Tom")}>callback {name}</div>
<Form onSubmit={handleSubmit}></Form>
</div>
);
}
const Form = memo(function Form({ onSubmit }: any) {
console.log("###form"); //在click的时候不会打印
return <div onClick={onSubmit}>input form</div>;
})
useCallback我们就介绍到这里了。
