简易实现React的useState

setState

1. 首次渲染组件时，App会被调用，获得虚拟dom，建立真实的dom
2. 当点击button时，调用setN，再次调用App，获得虚拟dom，用DOM Diff算法更新dom

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

function App() {
  const [n, setN] = React.useState(0);
  console.log("App 运行了"); // App 被调用就会执行一次
  console.log(`n: ${n}`); // App 被调用后 n 每次都不同
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

n在App被调用后每次都会变化，可是setN()却不会改变n。

• setN必定会修改数据x，将n + 1存入x
• setN必定会触发App从新渲染`
• useState确定会从x读取n的最新值
• 每一个组件都有本身的数据x，咱们将其命名成state

本身来实现setState

• 声明一个myUseState，接收一个初始值initialValue
• 将初始值initialValue赋值给一个中间变量state
• 内部声明一个函数setState，接收一个newValue，再将newValue赋值给state，并执行App
• 返回state和setState

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

const myUseState = initialValue => {
  let state = initialValue;
  const setState = newValue => {
    state = newValue;
    render();
  };
  return [state, setState];
};

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

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

ReactDOM.render(<App />, rootElement);

可是这样有个问题每次执行setN时，都会把state设置为初始值，由于每次执行setN都会传入一个初始值0

解决这个问题就是将state变成全局变量

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

let _state;
const myUseState = initialValue => {
  _state = _state === undefined ? initialValue : _state;
  const setState = newValue => {
    _state = newValue;
    render();
  };
  return [_state, setState];
};

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

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

ReactDOM.render(<App />, rootElement);

若是一个组件使用了两个useState

function App() {
  const [n, setN] = myUseState(0);
  const [M, setM] = myUseState(1); // 会出问题，第一个会被覆盖
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
      <p>{m}</p>
      <p>
        <button onClick={() => setM(m + 1)}>+1</button>
      </p>
    </div>
  );
}

因为全部数据都存在一个_state中，因此会冲突。

可使用数组去解决_state重复问题。

• 将_state声明为[]，同时声明一个索引index = 0
• myUseState方法内部声明一个临时变量currentIndex，用来保存索引index
• 用索引去初始化_state
• setState时也将经过索引去操做_state
• index += 1
• 返回_state[currentIndex]和setState
• 每次调用render方法是将index重置为0

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

let _state = [];
let index = 0;
const myUseState = initialValue => {
  const currentIndex = index;
  _state[currentIndex] =
    _state[currentIndex] === undefined ? initialValue : _state[currentIndex];

  const setState = newValue => {
    _state[currentIndex] = newValue;
    render();
  };
  index += 1;
  return [_state[currentIndex], setState];
};

const render = () => {
  index = 0;
  ReactDOM.render(<App />, rootElement);
};

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

ReactDOM.render(<App />, rootElement);

useState调用顺序

• 若第一渲染时n是第一个，m是第二个，k是第三个
• 则第二次渲染时必须保证顺序彻底一致
• React不容许出现以下代码

function App() {
  const [n, setN] = myUseState(0);
  let m, setM;
  if (n % 2 === 1) [m, setM] = myUseState(0); // 报错
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>N+1</button>
      </p>
      <p>{m}</p>
      <p>
        <button onClick={() => setM(m + 1)}>M+1</button>
      </p>
    </div>
  );
}

报错信息：React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed.

问题：

App用了_state和index那其余组件用什么？

• 给每一个组件建立一个_state和index

放在全局做用域重名了咋整

• 放在组件对象的虚拟节点对象上

感受会是bug

function App() {
  const [n, setN] = myUseState(0);
  const log () => setTimeout(() => console.log(`n: ${n}`), 3000)
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>N+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

先点击N+1时，再点击log，输出是没有问题

若是先点击log，在点击N+1，就会发现输出的竟然是0。难道N+1后输出不是1么。

由于setN是不会改变n，而是生成一个新的n。

解决上面那个感受是bug

• 全局变量，window.xxx
• useRef不只能够用于div，还能用于任意数据
• useContext不能能贯穿始终，还能贯穿不一样组件

function App() {
  const nRef = React.useRef(0);   // { current: 0 }
  const log () => setTimeout(() => console.log(`n: ${React.useRef(0)}`), 3000);
  const update = React.useState(null)[1];
  return (
    <div className="App">
      <p>{nRef.current}</p>
      <p>
        <button onClick={() => { 
          nRef.current += 1;  // 这里不能实时更新
          update(nRef.current;
          )}}>N+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

React.current += 1不会让App从新渲染。

总结

• 每一个函数组件对象一个React节点
• 每一个节点保存着state和index
• useState会读取state[index]
• index由useState出现的顺序决定
• setState会修改state，并触发更新。

Tips：

1. 这里是对React作了简化，方便理解。
2. React对象节点应该是FiberNode
3. _state的真实名称为memorizedState；index的实现用到了链表

另外可添加微信ttxbg180218交流