useState 原理

const App = () => {
  const [n, setN] = useState(0)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  )
}
export default App;

分析

setState

• setState 一定会修改中间变量 state，将 n+1存入 state
• setState一定会触发 <App/> 重新渲染（re-render）

useState

• useState 肯定会从 state 读取 n 的最新值

setParam(Object.assign({},param,{name:event.target.name}))
/*上下两种写法等价*/
setParam({...param,name: event.target.name})

myUseState

根据上面的分析模拟一个myUseState

下面是错误的写法

错误的原因：每次重新渲染 App 都会重新执行一次，myUseState 也重新执行一次 let state = initialState

const myUseState = (initialState) => {
  let state = initialState //此处出错
  const setState = (newState) => {
    state = newState
    render()
  }
  return [state,setState]
}

const render = () => {
  ReactDOM.render(<App/>,root);
}

const App = () => {
  const [n, setN] = myUseState(0)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  )
}

利用闭包储存上次的数据，防止被覆盖

let _state
const myUseState = (initialState) => {
  //_state = _state || initialState _state 为 0 时产生 bug
  _state = _state === undefined ? initialState : _state
  const setState = (newState) => {
    _state = newState
    render()
  }
  return [_state, setState]
}
const render = () => {
  ReactDOM.render(<App/>, root);
}

const App = () => {
  const [n, setN] = myUseState(2)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n - 1)}>-1</button>
      </p>
    </div>
  )
}

不能写成_state = _state || initialState，当 state 为 0 时，判定为 falsy值，自动返回 initialState 的值

解决了上面的问题，又出现新的问题

如果一个组件，使用两次 myUseState 怎么办？
由于所有的数据都放在 _state 里，后面的会覆盖前面的 _state

多个myUseState

• 思路一：把 _state 变成一个对象

每次传值都得传递一个 key（属性名），例如：const [n, setN] = myUseState('m':2)
但是 useSate 并没有传递属性名，所以 _state 不是对象

• 思路二：把 _state 变成一个数组
  • 例如：_state=[0,0] 看着还可以，试一试

let _state = []
let index = 0
const myUseState = (initialState) => {
  const currentIndex = index //保证返回结果的数组的下标固定
  _state[currentIndex] = _state[currentIndex] === undefined ? initialState : _state[currentIndex]
  const setState = (newState) => {
    _state[currentIndex] = newState
    console.log(_state)
    render()
  }
  index += 1
  return [_state[currentIndex], setState]
}
const render = () => {
  index = 0 // index重置
  ReactDOM.render(<App/>, root);
}

const App = () => {
  const [n, setN] = myUseState(2)
  const [m, setM] = myUseState(2)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n - 1)}>-1</button>
      </p>
      <p>{m}</p>
      <p>
        <button onClick={() => setN(m - 1)}>-1</button>
      </p>
    </div>
  )
}

每次 render 都会调用 <App/>，读取 _state 内的数据，重新渲染页面，因此 index 要在调用 <App/> 之前重置为 0

总结

• 每个函数组件对应一个FiberNode（虚拟节点）
• 每个节点都保存着 state 和 index
• useState 会读取对应节点的 state[index]
• index 由 useState 调用（出现）的顺序决定，因此，React Hook 只能在顶层调用，不能条件调用和在纯函数内嵌套调用
• 在 setState 里修改 state 并触发更新
• React 中 state 的名字叫 memorizedState，index 是用链表实现的