react的hook 即为"钩子", 是 react 16.8 的新特性, 你可以在不写 class 的情况下使用 state 和其他的 react 特性。

1.解剖useEffect的特性

useEffect的特性：

1.有两个参数，一个是callback，一个是依赖项数组

2.如果依赖项为空数组，那么只执行一次callback

3.如果依赖项存在，那么每当它发生了变化，callback执行

4.如果不存在第二个参数，那么每次渲染都会执行callback

useEffect模拟实现版本

支持多个useEffect：用二维数组+下标来保存值来实现

// Hook 编写
let allDeps: Array<any[] | undefined> = [] // 记录多个依赖性
let cursor: number = 0
function useEffect(callback: () => void, arr?: any[]) {
  let _cursor = cursor
  // 1.如果没有传入依赖项
  if (!arr) {
    callback()
    allDeps[_cursor] = arr
    cursor++
    return
  }
  const deps = allDeps[_cursor] // 当前useEffect上一次记录的依赖项


  // 2.如果传入依赖项
  let isChange = deps ? deps.some((item, index) => item != arr[index]) : true


  if (isChange) {
    callback()
    allDeps[_cursor] = arr
  }
  cursor++
}

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。