一、useEffect
调用 useEffect 时就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数
- 第一个参数 回调函数
- 第二个参数 可选(不传,一个或多个,空数组)
- 如果有多个副效应,应该调用多个useEffect(),而不应该合并写在一起
1、不传递参数
- 反复执行
useEffect(() => {
// ...
})
2、传一个参数
- 监听当前参数更新时执行
useEffect(() => {
// ...
}, [currentDate])
场景问题:
- 当不是路由跳转新页面,而是modal弹框类
- 传
id或[]
只会在加载当前路由时执行一次,触发modal时不执行
解决办法:
- 将当前触发modal
时间戳
作为useEffect
第二个参数
const handleEdit = (record: any) => {
setCurrentDate(new Date().getTime())
setCurrentCode(record.code)
setVisible(true)
}
useEffect(() => {
setInitLoading(true)
if (currentCode) {
api.sceneOrgWhiteShow(currentCode).then((res: ResultSceneOrgWhiteVo, { isOk }) => {
if (isOk) {
const data = res.data
setLogo(data?.logo ?? '')
setName(data?.name ?? '')
setData(data?.orgList)
setSelectData(data?.selectedOrgList ?? [])
setInitSelect(data?.selectedOrgList)
}
}).finally(() => {
setInitLoading(false)
})
}
}, [currentDate])
3、传空数组
- 挂载和卸载的时候执行
useEffect(() => {
// ...
}, [])
二、useMemo
把“创建”函数和依赖项数组作为参数传入 useMemo,避免不必要的执行渲染,以达到优化性能的目的
- 缓存计算结果的值
- 计算结果是 return 的值
import { useMemo } from "react";
const showName = (name) => {
console.log("Son render");
return "my name is " + name;
};
return (
<>
<div>
{useMemo(() => {
console.log("memo");
showName(props.name);
}, [props.name])}
</div>
<div>{showName(props.name)}</div>
</>
);
- 不用 useMemo,函数会被执行两次 “Son render”
- 使用后,职位执行一次 “memo”
三、useCallback
- 缓存函数
- 任一
state
变化会导致整个组件刷新,一些不需要刷新的函数缓存,减少资源浪费
const dataLoaderList = useCallback<DataLoader>((callback) => {
api.invoiceTransQueryToVerificationTransInfoList({
data: {
commitType: 'all'
},
pageIndex: 1, pageSize: 3
})
.then((res) => {
callback.onData(res.data)
setDataList(res.data ?? [])
})
.catch(() => {
callback.onError()
})
}, [])
小结:
useMemo
与useCallback
都是依赖数据 发生变化, 才会重新计算结果,起到缓存作用useMemo
缓存计算结果的值useCallback
缓存函数
四、memo
react 中父组件中状态的改变会让所有的子组件重新渲染
memo 缓存子组件,避免不必要的渲染
不是每个组件都需要缓存,缓存需要成本
const [list, setList] = useState([1, 2, 3, 4, 5]);
setList(list.push(1));
// 改变的是堆中的数据,存在与栈中的地址不会改变。不能返回新数组,memo是检测不到
setList([...list, 1]);
// 相当于返回了一个新的数组,栈中的地址就会改变,memo就可以检测到并触发更新
五、useRef
用于函数组件访问DOM元素或函数组件访问之前渲染变量