手写模拟实现 React Hooks

时间 2020-10-27

标签 javascript java react git github 数组浏览器缓存 app dom 栏目 React 繁體版

原文原文链接

前言

首先使用create-react-app新建个项目，而后在index.js写咱们的代码，阅读本文前须要知道经常使用 React Hooks 的基本用法。javascript

useState

import React from 'react'
import ReactDOM from 'react-dom'

let memorizedState
const useState = initialState => {
  memorizedState = memorizedState || initialState // 初始化
  const setState = newState => {
    memorizedState = newState
    render() // setState 以后触发从新渲染
  }
  return [memorizedState, setState]
}

const App = () => {
  const [count1, setCount1] = useState(0)

  return (
    <div>
      <div>
        <h2>useState： {count1}</h2>
        <button
          onClick={() => {
            setCount1(count1 + 1)
          }}
        >
          添加count1
        </button>
      </div>
    </div>
  )
}

const render = () => {
  ReactDOM.render(<App />, document.getElementById('root'))
}
render()

但到这里会有一个问题，就是当增长第二个 useState 的时候会发现改变两个 state 都是改同一个值，同步变化，因而，咱们经过使用数组的方式下标来方式来区分。java

import React from 'react'
import ReactDOM from 'react-dom'

let memorizedState = [] // 经过数组形式存储有关使用hook的值
let index = 0 // 经过下标记录 state 的值
const useState = initialState => {
  let currentIndex = index
  memorizedState[currentIndex] = memorizedState[index] || initialState
  const setState = newState => {
    memorizedState[currentIndex] = newState
    render() // setState 以后触发从新渲染
  }
  return [memorizedState[index++], setState]
}

const App = () => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(10)

  return (
    <div>
      <div>
        <h2>
          useState： {count1}--{count2}
        </h2>
        <button
          onClick={() => {
            setCount1(count1 + 1)
          }}
        >
          添加count1
        </button>
        <button
          onClick={() => {
            setCount2(count2 + 10)
          }}
        >
          添加count2
        </button>
      </div>
    </div>
  )
}

const render = () => {
  index = 0
  ReactDOM.render(<App />, document.getElementById('root'))
}
render()

这样就实现效果了：
react

分析：git

第一次页面渲染的时候，根据 useState 顺序，声明了 count1 和 count2 两个 state，并按下标顺序依次存入数组中
当调用setState的时候，更新 count1/count2 的值，触发从新渲染的时候，index 被重置为 0。而后又从新按 useState 的声明顺序，依次拿出最新 state 的值；由此也可见为何当咱们使用 hook 时，要注意点 hook 不能在循环、判断语句内部使用，要声明在组件顶部。

memorizedState这个数组咱们下面实现部分 hook 都会用到，如今memorizedState数组长度为 2，依次存放着两个使用useState后返回的 state 值；github

0: 0
1: 10

每次更改数据后，调用render方法，App函数组件从新渲染，又从新调用useState，但外部变量memorizedState以前已经依次下标记录下了 state 的值，故从新渲染是直接赋值以前的 state 值作初始值。知道这个作法，下面的useEffect,useCallback,useMemo也是这个原理。数组

固然实际源码，useState是用链表记录顺序的，这里咱们只是模拟效果。浏览器

useReducer

useReducer 接受 Reducer 函数和状态的初始值做为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。缓存

let reducerState

const useReducer = (reducer, initialArg, init) => {
  let initialState
  if (init !== undefined) {
    initialState = init(initialArg) // 初始化函数赋值
  } else {
    initialState = initialArg
  }

  const dispatch = action => {
    reducerState = reducer(reducerState, action)
    render()
  }
  reducerState = reducerState || initialState
  return [reducerState, dispatch]
}

const init = initialNum => {
  return { num: initialNum }
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { num: state.num + 1 }
    case 'decrement':
      return { num: state.num - 1 }
    default:
      throw new Error()
  }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, 20, init)

  return (
    <div>
      <div>
        <h2>useReducer：{state.num}</h2>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      </div>
    </div>
  )
}

useEffect

对于 useEffect 钩子，当没有依赖值的时候，很容易想到雏形代码：app

const useEffect = (callback, dependencies) => {
  if (!dependencies) {
    // 没有添加依赖项则每次执行，添加依赖项为空数组
    callback()
  }
}

但若是有依赖 state 值，便是咱们使用 useState 后返回的值，这部分咱们就须要用上方定义的数组 memorizedState 来记录dom

let memorizedState = [] // 存放 hook
let index = 0 // hook 数组下标位置
/**
 * useState 实现
 */
const useState = initialState => {
  let currentIndex = index
  memorizedState[currentIndex] = memorizedState[index] || initialState
  const setState = newState => {
    memorizedState[currentIndex] = newState
    render() // setState 以后触发从新渲染
  }
  return [memorizedState[index++], setState]
}

/**
 * useEffect 实现
 */
const useEffect = (callback, dependencies) => {
  if (memorizedState[index]) {
    // 不是第一次执行
    let lastDependencies = memorizedState[index] // 依赖项数组
    let hasChanged = !dependencies.every(
      (item, index) => item === lastDependencies[index]
    ) // 循环遍历依赖项是否与上次的值相同
    if (hasChanged) {
      // 依赖项有改变就执行 callback 函数
      memorizedState[index++] = dependencies
      setTimeout(callback) // 设置宏任务，在组件render以后再执行
    } else {
      index++ // 每一个hook占据一个下标位置，防止顺序错乱
    }
  } else {
    // 第一次执行
    memorizedState[index++] = dependencies
    setTimeout(callback)
  }
}

const App = () => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(10)

  useEffect(() => {
    console.log('useEffect1')
  }, [count1, count2])

  useEffect(() => {
    console.log('useEffect2')
  }, [count1])

  return (
    <div>
      <div>
        <h2>
          useState： {count1}--{count2}
        </h2>
        <button
          onClick={() => {
            setCount1(count1 + 1)
          }}
        >
          添加count1
        </button>
        <button
          onClick={() => {
            setCount2(count2 + 10)
          }}
        >
          添加count2
        </button>
      </div>
    </div>
  )
}

const render = () => {
  index = 0
  ReactDOM.render(<App />, document.getElementById('root'))
}
render()

程序第一次执行完毕后，memorizedState 数组值以下

0: 0
1: 10
2: [0, 10]
3: [0]

上述代码回调函数执行，原本咱们能够用callback()执行便可，但由于useEffect在渲染时是异步执行，而且要等到浏览器将全部变化渲染到屏幕后才会被执行；

由于是异步且等页面渲染完毕才执行，根据对 JS 事件循环的理解，咱们想要它异步执行任务，就在此建立一个宏任务setTimeout(callback)让它进入宏任务队列等待执行，固然这其中具体的渲染过程我这里就不细说了。

还有一个 hook 是useLayoutEffect，除了执行回调的两处地方代码实现不一样，其余代码相同，callback这里我用微任务Promise.resolve().then(callback)，把函数执行加入微任务队列。

由于useLayoutEffect在渲染时是同步执行，会在全部的 DOM 变动以后同步调用，通常可使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制以前，useLayoutEffect 将被同步刷新。

怎么证实呢？若是你在useLayoutEffect加了死循环，而后从新打开网页，你会发现看不到页面渲染的内容就进入死循环了；而若是是useEffect的话，会看到页面渲染完成后才进入死循环。

useLayoutEffect(() => {
  while (true) {}
}, [])

useCallback

useCallback和useMemo会在组件第一次渲染的时候执行，以后会在其依赖的变量发生改变时再次执行；而且这两个 hooks 都返回缓存的值，useMemo 返回缓存计算数据的值，useCallback返回缓存函数的引用。

const useCallback = (callback, dependencies) => {
  if (memorizedState[index]) {
    // 不是第一次执行
    let [lastCallback, lastDependencies] = memorizedState[index]

    let hasChanged = !dependencies.every(
      (item, index) => item === lastDependencies[index]
    ) // 判断依赖值是否发生改变
    if (hasChanged) {
      memorizedState[index++] = [callback, dependencies]
      return callback
    } else {
      index++
      return lastCallback // 依赖值不变，返回上次缓存的函数
    }
  } else {
    // 第一次执行
    memorizedState[index++] = [callback, dependencies]
    return callback
  }
}

useMemo

而useMemo实现与useCallback也很相似，只不过它返回的函数执行后的计算返回值，直接把函数执行了。

const useMemo = (memoFn, dependencies) => {
  if (memorizedState[index]) {
    // 不是第一次执行
    let [lastMemo, lastDependencies] = memorizedState[index]

    let hasChanged = !dependencies.every(
      (item, index) => item === lastDependencies[index]
    )
    if (hasChanged) {
      memorizedState[index++] = [memoFn(), dependencies]
      return memoFn()
    } else {
      index++
      return lastMemo
    }
  } else {
    // 第一次执行
    memorizedState[index++] = [memoFn(), dependencies]
    return memoFn()
  }
}

useContext

代码出乎意料的少吧...

const useContext = context => {
  return context._currentValue
}

useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

let lastRef
const useRef = value => {
  lastRef = lastRef || { current: value }
  return lastRef
}

后面几个例子我就没展现出 Demo 了，附上 Github 地址：上述hooks实现和案例

ps：我的技术博文 Github 仓库，以为不错的话欢迎 star，给我一点鼓励继续写做吧~