关于react的常用的hook

使用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 (
    <h1 onClick={onClick}>78946</h1>
  )
})
父组件主要传一个ref
 
<Children ref = { ref } />