react学习-函数式常用hook

文章介绍了在React函数式组件中如何使用useState进行状态管理,包括单个值和多个值的修改。同时,详细讲解了useEffect的四种用法,以及何时使用空数组、传入参数和返回函数的情况。另外,提到了useRef和createRef在获取DOM元素上的区别,以及useMemo和useCallback在优化性能上的作用。
摘要由CSDN通过智能技术生成

函数式

修改useState值

单个值

  • 对于在函数式组件中,如果想使用state就需要使用到useState
  • 如果要修改state值,需要将其结构,在useState内部中是使用数组的形式存储的
    • 第一个参数是获取当前设定的值
    • 第二个参数是修改当前设定的值

用法和在类组件中有相似的地方

<Button
    type="primary"
    ghost
    block
    onClick={() => {
        setNum(getNum + 1);
    }}
    >
    新增
</Button>

注意:当前取出的是数组[getNum, setNum]需要对其结构,结构时也是用数组结构的,不是对象形式

多个值

获取值
const [State, setState]: any = useState({
    supNum: 10,
    oppNum: 5,
});
修改值
const handel = (type: number) => {
    type === 1
        ? setState({ ...State, supNum: State.supNum + 1 })
    : setState({ ...State, oppNum: State.oppNum + 1 });
};

修改值时,不可以直接的修改,需要把前面的值加上

useEffect

  • 只有第一次渲染完之后才会执行callback,每一次更新完毕后,callback不再执行
  • 类似于componentDidMount
  • 一共四种用法

四种用法

1. 普通用法
  • 直接调用useEffect
useEffect(() => {
    console.log(num);
});

这种写法,在第一次加载时会触发,如果值变化了,在组建更新时也会触发

2. 带空数组
  • 如果在函数后面传入一个空数组,只会在组件刚加载时会触发,后面将不再监听
useEffect(() => {
    console.log(num);
}, []);

这种写法相当于一次性的,只有第一次才会触发后面不会再去触发这个函数

3. 带参数
  • 只会监听传入的值,如果后面传入的值没有发生变化不会触发这个函数执行
useEffect(() => {
    console.log(num);
}, [num]);
4. 返回函数
  • 如果在函数中,返回函数,监听值的变化或者不传入数组,这个函数只会执行上一次变化的值
useEffect(() => {
    return () => {
        console.log(num);
    };
}, [num]);

有点像vue中的watch,后面数组中如果 传入的值被使用则会更新,无论后面的数组中使用的值是否被使用刚加载时都会触发

加入判断条件

  • useEffect不可以放在判断、循环等操作语句中
if (num > 5) {
    useEffect(() => {});
}
  • 如果想判断一个值大于5的时候再执行,这是只需要将判断条件放在执行函数里面即可
useEffect(() => {
    if (num > 5) {
        console.log(num);
    }
});

发送异步请求

  • 第一次渲染完毕后。异步的去服务器获取数据
useEffect(() => {
    const next = async () => {
        const result = await 3;
    };
    next();
}, []);

useRef和createRef

useRef

  • 可以在函数组件中使用也可以在函数组件中也可以使用
  • React.createRef 只能在类组件中使用

使用方式

const Demo = () => {
    const box = useRef(null);
    const box2: RefObject<HTMLSpanElement> = createRef();

    useEffect(() => {
        console.log(box.current);
        console.log(box2.current);
    });

    return (
        <>
        <span ref={box}>123</span>
        <span ref={box2}>456</span>
        </>
    );
};

useRef中,需要使用xxx.current才可以拿到DOM元素

createRef

  • 在每次组件加载时都会重新渲染一遍,会重新的创建一个全新的ref对象,影响性能

两个的区别:在类组件中,创建ref对象,可以基于 React.createRef 处理;但是在函数组件中为了保证性能,可以使用专属的 useRef 去处理

useMemo

  • 相当于vue中的计算属性或者是监听函数
  • 使用方式需要在后面加上需要监听的值,是一个数组,函数内部是需要计算的内容
const ratio = useMemo(() => {
    const total = num.ok + num.not;

    return `${((num.ok / total) * 100).toFixed(2)}%`;
}, [num.ok, num.not]);

在函数式组件中,在内部的闭包函数中每次组件更新所创建的函数都是新函数

useCallback

  • 组件第一次渲染,useCallback 执行,创建一个函数callback 赋值给xxx

  • 组件后续第一次更新,判断的状态值是否改变,如果创建新的函数堆,赋值给xxx;但是如果依赖状态没有更新 或者让没有设置依赖

  • 则获取的意志是第一次创建的函数堆

  • 或者或基于useCallback,可以获取第一次创建函数的堆地址 或者是函数的引用

useCallback(() => {
    console.log(num);
}, [num]);

useCallback不要乱用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值