react hooks浅谈

一.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)

}}>