React中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] : initialState;
  setters.push(createSetter(stateIndex));
  let setter = setters[stateIndex];
  let value = state[stateIndex];
  stateIndex++;
  return [value, setter];
}

function render() {
  stateIndex = 0;
  ReactDOM.render(<App />, document.getElementById('root'));
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('hello');

  // ...
}

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

// ...（前面定义的全局变量和函数）

function App() {
  // 使用自定义的useState钩子
  const [count, setCount] = useState(0);
  const [text, setText] = useState('hello');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <input value={text} onChange={e => setText(e.target.value)} />
    </div>
  );
}

export default App;