使用hook 的原因是复用状态逻辑
hook 的规则
1.hook 需要写到函数的最顶层,不能写到for、map、if里面
2.hook 必须写到函数组件内们不能写到类组件
3 自定义hook必须以use开头
/
1.React.useState
这个是定义值的 里面能直接给值 也能写逻辑 需要的时候里面写一个函数 写一些需要的逻辑最后返回一个最终值即可
2.React.useEffect
这个能模仿三个class的生命周期
a.第一个是componentDidMount() 页面刚开始的时候加载
b.第二个是 更新期 useEffect里面能写两个参数第一个是函数,第二个是依赖在[]里面写,里面的数据更新 它就执行
c.第三个就是 卸载期 在最后写一个return () => {} 大括号里就是卸载期里写的内容
3,4. React.createRef() React.useref()
这两个是定义ref的这两个使用的方法极为相似 区别是React.createRef() 每次加载的时候会产生不同的缓存地址而
React.useref()每次加载的地址就是第一次加载的地址 是不会变的
5.React.useMemo 这个的用法 是
React.useMemo(() => { let sum = 0; return sum },[pop])
这个里面的内容自己执行返回一个值 调用的时候就不用加 ()
把需要执行的函数包裹起来,如果没有pop的话就会触发一次 加上pop
pop改变这个函数随之发生触发
6.React.useCallback() 这个的用法是
const one = useCallback(() => { console.log(132) },[])
这个返回一个新函数,当【】 依赖 里面是空的时候内存的地址是不变的
7.React.memo()
这个是针对于子组件渲染的 父元素改变 子组件也会发生改变 运用了memo
之后 依赖是空的时候 子组件不会发生改变 也不会重新渲染
8,9. React.forwardRef,React.useImperativeHandle
运用的是 子组件 ⬇⬇⬇⬇
const Children = forwardRef((props,ref) => {
useImperativeHandle(ref, () => ({
fun: () => pop()
}), [])
const pop = () => {
console.log(852852);
}
const onClick = () => {
ref.current.fun()
}
return (
78946
)
})
父组件主要传一个ref
<Children ref = { ref } />