React Hook

Hook官网地址

B站学习视频

为什么要使用Hook

• 针对一些复杂组件，可以进行拆分，将每个相关的小模块拆分成一个函数
  1. componentDidMount domponentDidUpdate componentWillUnmount
  2. addEventListener removeEventListener
  3. useEffect去执行一些方法返回结果，消除一些对应
• 提高代码的复用性

Hooks的原理是什么？

• hook的数据就是保存在fiber.memoizedState的链表，每个hook对应一个链表节点
• hook的执行分为mountXxx和updateXxx两个阶段，第一次会走mountXxxx，创建hook链表，之后执行updateXxx.
• hooks的链表结构是环状链表。a=>b=>c=>a,因为React内部方便处理数据结构，进行hooks的遍历。

Hook规则

Hook本质就是JavaScript函数，但是在使用时需要遵循两条规则

• 只在最顶层使用Hook,不要在循环，条件或嵌套函数中调用
• 只在React函数中调用Hook

为什么不能在判断、循环中调用Hook?

因为Hooks的结构是链表，是一个通过next串联的链表。

函数中有几个hooks就有几个next，如果写判断next链条就断了。

自定义Hooks

  import {useEffect} from "react"
  const useTitle = (title) => {
    useEffect(() => {
      document.title = title;
    }, []);
  };
  export default useTitle

使用时

const App = ()=>{
  useTitle("new title")
}

手写throttle debounce hooks