React-简易的useState

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

// 数组解决调用多个 useState
let state = []
let setters = []
let stateIndex = 0

// 函数自调用
function createSetter (index) {
  return function (newState) {
    state[index] = newState
    render()
  }
}

function useState (initialState) {
  // 赋值 state[stateIndex]
  state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState
  setters.push(createSetter(stateIndex))
  let value = state[stateIndex]
  let setter = setters[stateIndex]
  stateIndex++
  return [value, setter]
}

// 更新DOM
function render () {
  stateIndex = 0 //归零

  // React.StrictMode 第一次渲染/页面刷新后 不更新视图

  ReactDOM.render(<React.StrictMode>
    <App />
  </React.StrictMode>, document.getElementById('root'))

  console.log('ss')

}

function App () {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('ul')

  return (
    <div className="App">
      {count}
      <button onClick={() => setCount(count + 1)}> setCount </button>
      {name}
      <button onClick={() => setName('li')}> setName </button>
    </div>
  );
}

export default App;