简易实现React useState

前置知识：本文默认你已经用过hooks

使用set时会发生什么

首先我们肯定知道会修改原state的状态，会对比dom，如果dom发生变化，会进行dom渲染
我们先看看看useState的特点

简易实现useState

代码量不多，有兴趣的自己敲一遍就好了

useState的细节

先看App组件的内容，再看useState的实现

支持多个useState

存储state的变成了数组，用下标识别是要set哪一个state
注意点：index在App第二次执行前要清0；
你可能会说，我试过，我把index清0放在第二次执行后执行也可以呀！额。。。。自己加个log看看，我们都说set是异步的，严格意义来说是set里面的render才是异步的

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

let state = []//用于存储useState传过来的值
let index = 0
const nodeList = [] //用来存储每次App调用返回的节点
const useState = (initValue) => {
  const currentIndex = index //记下当前下标，因为index需要+1 方便存储下一个useState
  state[index] = state[index] === undefined ? initValue : state[index]
  const setState = (newState) => {
    state[currentIndex] = newState
    index = 0
    ReactDOM.render(<App />, document.getElementById('root'));
    console.log(nodeList)
  }
  console.log(`myUseState的n:${state}`)
  index += 1
  return [state[currentIndex], setState]
}

const App = () => {
  const [n, setN] = useState(0)
  const [m, setM] = useState(0)
  console.log(`App的n:${n}`)
  const component = (//加个中间变量，方便记录每次App返回的节点
    <div>
      {n}
      <button onClick={() => { setN(n + 1) }}>+1</button>
      {m}
      <button onClick={() => { setM(m + 1) }}>+1</button>
    </div>
  )
  nodeList.push(component)//把节点存起来，方便查看
  return (component)
}

ReactDOM.render(<App />, document.getElementById('root'));
复制代码

useState的缺点

useState每次通过执行顺序分配下标的来存储和set，所以你不能用if等操作来使用useState，有时候使用，有时候不使用，会改变数组的顺序