useState的用法

demo

function App (){
const  [n,setN] =React.useState(0);
return (
	<div className = "App">
    <p> {n}</p>
    <p>
    <button onClick={()=>setN(n+1)}>+1</button>
    </p>
    </div>
)
}
ReactDOM.render(<App/>,rootElement);

分析

setN

• setN一定会修改x，将n+1存入x
• setN一定会触发重新渲染

useState

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

X

每个组件有自己的数据X,我们将其命名为state

尝试实现React.useState

demo

function useState(initialValue) {
  var state = initialValue;
  function setState(newState) {
    state = newState;
    render();
  }
  return [state, setState];
}

这时我们发现，点击 Button 的时候，count 并不会变化，为什么呢？我们没有存储 state，每次渲染 Counter 组件的时候，state 都是新重置的。自然我们就能想到，把 state 提取出来，存在 useState 外面。 demo

var _state; // 把 state 存储在外面

function useState(initialValue) {
  _state = _state || initialValue; // 如果没有 _state，说明是第一次执行，把 initialValue 复制给它
  function setState(newState) {
    _state = newState;
    render();
  }
  return [_state, setState];
}