React Hooks使用(useEffect、useMemo、useCallback)

一、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()
        })
}, [])

小结:

  • useMemouseCallback都是依赖数据 发生变化, 才会重新计算结果,起到缓存作用
  • 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元素或函数组件访问之前渲染变量


Hooks 官方文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值