react hooks浅谈

2023-12-20 02:49:03

一.useEffect

useEffect是hooks中的生命周期函数
1.只要页面更新就触发回调:
useEffect(() => {
// 执行逻辑
})
2.只运行一次(组件挂载和卸载时执行),第二个参数传空数组[]:
useEffect(() => {
//
},[])
3. 条件执行,第二个参数传值,可以是多个数据源的数组,当依赖的数据源发生改变时,执行回调:
useEffect(() => {
//
},[source1,source2…])

二.useState

useState用来更新数据状态
类组件是用的setState({})

三.useRef, useImperativeHandle,forwardRef

1.首先我们先用React.useRef创建一个ref
const reRef = React.useRef(null);
2. forwardRef是允许了 父组件向子组件传递一个ref,父组件才可以获得子组件的方法和实例元素
3. useImperativeHandle 是在子组件中接收这个ref 可以暴露子组件的特定属性或方法给父组件

例子:
父组件:
import React, { useEffect, useState, useRef } from ‘react’;
const reRef =useRef(null);
reRef.current.fn();

子组件:
function Parent(props, ref) {
const [visible, setVisible] = useState);

useImperativeHandle(ref,()=>({
fn: ()=>{
console.log(‘这是传的第一个方法’);
},
fn2: ()=>{
console.log(‘这是传的第二个方法’);
},
setVisible,//这是传的一个属性值
})

}

export default forwardRef(Parent);

注:当需要复杂的传值的属性和方法调用时 这么用可以
但一般单纯的回归方法调用就能解决就不用这样写了
比如
父组件:
<Parent onClose={(num)={
console.log(881,num)

}}>

文章来源:https://blog.csdn.net/weixin_46451295/article/details/135087337
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。