【React hooks】useState (原理) 与useEffect (用法)

简单的原理

如下例子，使用useState函数，可以得到初始值n=0，随后每一次调用setN都可以更新n，并渲染App

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

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);

查了资料后了解到，useState等hooks是用到了闭包，外部储存一个变量_state（此处为了方便称呼如此命名，不代表官方就是叫这个）来保存目标数据，每次setN的时候，就是讲n改为_state的，不然重新渲染App的时候，又会走const [n, setN] = React.useState(0);这个函数，又会重置为初始值，所以要用到闭包

简单的实现

那么用野路子，简单的实现一下这个功能

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");


let _state; // 把 state 存储在外面
 
function useState(initialValue) {
   
  _state = _state === undefined ? initialValue : _state; // 如果没有 _state，说明是第一次执行，把 initialValue 复制给它
  function setState(newState) {
   
    _state = newState;    //实际修改的是_state，重新渲染也会去拿_state
    render();
  }
  return [_state, setState];
}
//简单的实现render
const render = ()=>{
   
  ReactDOM.render(<App />, rootElement);
}

function App() {
   
  const [n, setN] = React.useState(0);
  return (
    <div className="App">
      <p>{
   n}</p