feshin

feshin

关注
发信
关注(28)粉丝(399)

认清 React 的useState逻辑

useState运行过程解析


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

const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);
第一次渲染

  1. 调用 render <App /> ，<App / >组件调用 App()函数

  2. App()函数调用 const [n, setN] = useState(0)给 n 赋值，并且得到 一个 setN函数

  3. App()函数会根据 n 的值 和 setN返回一个虚拟的 DOM节点

  4. React 会根据 虚拟DOM创建一个真实DOM节点，并且将真实DOM渲染到浏览器上，所以我们可以通过调试工具看到一个渲染出来的 DIV节点

点击一次button按钮

  1. 调用 onClick()函数，onClick()函数又调用setN()函数

  2. setN在更新了 n 的值（先不管是怎么更新的）之后会重新调用 render <App />

  4. App函数同样会执行const [n, setN] = useState(0)，根据 新的n 返回一个 新的虚拟DOM

  5. React 根据 DOM Diff算法 将 新的虚拟DOM和旧的虚拟DOM进行对比，得到最小的变动范围对象（patch 对象）

  6. 根据最小的变动范围对象来更新真实DOM

点击button 后 n 是怎么变的 ?

首先要思考几个问题:

  • 执行 setN()的时候会发生什么： n 会变吗？App()会重新执行吗？

  • 如果 App()会重新执行，那么 useState(0)的时候，n每次的值会有不同吗?

    以上问题通过 console.log()就能得到答案

执行 setN的时候

  1. 一定会重新渲染UI，但是这时候 n 会变吗？n 还没有变！！

  2. setN( n + 1)并没有改变 n，而是改变了一个中介数据 state(state 是什么？继续往下看)

  3. 因为要重新渲染UI，所以 render <App />会重新执行 App()

重新执行App()的时候
  1. 重新执行const [n, setN] = useState(0)的时候确实 n 会得到不同的值！
分析

  • setN

    • setN(n + 1) 一定会修改数据 state，将 n + 1存入state
    • setN()一定会触发

  • useState

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

  • state

    • 每个组件都有自己的数据 state，这是我们需要理解的核心

尝试实现一个 useState



const myUseState = (initialValue) => {
	let  state =  initialValue ;// 我们设置的一个 state 接收 初始值
  const setState = (newValue) => {
      // 我们设置的一个 setState函数
    state = newValue; // 更新 state 的值
    re_render(); // useState会重新渲染页面UI
  };
  return [state, setState]; // 返回一个 state 和 更新state的函数: setState
};

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

// 上面是我们实现的一个 myUseState
function App() {
  console.log("App 运行了");
  const [n, setN] = myUseState(0);
  console.log(n)
  return (
    <div>
      <p>{n}</p>
      <p>
        <button
          onClick={() => {
            setN(n + 1);
          }}
        >
          +1
        </button>
      </p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);

上面的代码还存在一些问题

  • 每次调用 myUseState(0)都会将 state重置为初始值

  • 我们需要一个不会被 myUseState重置的 state变量

  • 还需要判断 state的取值是 初始值还是新值

改进 state变量


let _state;
const myUseState = (initialValue) => {
	_state =  _state === undefined ? initialValue : _state;// 我们设置的一个 state 接收 初始值
  const setState = (newValue) => {
      // 我们设置的一个 setState函数
    _state = newValue; // 更新 state 的值
    re_render(); // useState会重新渲染页面UI
  };
  return [_state, setState]; // 返回一个 state 和 更新state的函数: setState
};

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

// 上面是我们实现的一个 myUseState
function App() {
  console.log("App 运行了");
  const [n, setN] = myUseState(0);
  console.log(n)
  return (
    <div>
      <p>{n}</p>
      <p>
        <button
          onClick={() => {
            setN(n + 1);
          }}
        >
          +1
        </button>
      </p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App></App>, rootElement);

这样我们就实现了一个 useState!!

useState那么简单吗？

  • 上面的 useState只能实现一个组件使用一个 useState 的情况
  • 如果一个组件使用了两个 useState，由于数据都放在 _state，所以会产生冲突
改进思路
  1. 把_state做成一个对象
    • 比如_state = { n:0, m:0 }
    • 不行, 因为useState(0)并不知道变量叫 n 还是 m
  2. 把_state 做成数组
    • 比如_state = [0, 0]
    • 貌似可以

let _state = [];
let index = 0;

const myUseState = (initialValue) => {
    const currentIndex = index; // 需要一个 currentIndex 来保存当前的 index 的值
    _state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
    const setState = (newValue) => {
        _state[currentIndex] = newValue;
        re_render();
    };

    index += 1; // 当前index设置完之后，后面的state要存放在下一个 index中
    return [_state[currentIndex], setState];
};

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

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

const rootElement = document.getElementById('root');
ReactDOM.render(<App></App>, rootElement);
代码分析
  1. 上面的代码貌似可以解决两个 state 同时存储的问题，但是还是不能完成 useState的操作
  2. 我们应该要注意到当我们只是想重新更新 state的值的时候需要重新渲染App() ,index += 1同样也会执行，这就意味着这个数组每次调动useState之后都会变长一个单位！变长的总长度就是 App()里面使用的 useState的次数。
  3. 所以我们需要在每次渲染 <App />之前都需要重置一下 index = 0
重置 index

let _state = [];
let index = 0;

const myUseState = (initialValue) => {
    const currentIndex = index; // 需要一个 currentIndex 来保存当前的 index 的值
    _state[currentIndex] = _state[currentIndex] === undefined ? initialValue : _state[currentIndex];
    const setState = (newValue) => {
        _state[currentIndex] = newValue;
        re_render();
    };

    index += 1; // 当前index设置完之后，后面的state要存放在下一个 index中
    return [_state[currentIndex], setState];
};

const re_render = () => {
    index = 0; // !! 这里很重要，重新渲染之前必须要重置 index = 0,否则数组会变长！
    ReactDOM.render(<App></App>, rootElement);
};

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

const rootElement = document.getElementById('root');
ReactDOM.render(<App></App>, rootElement);
终于成功实现了useState的逻辑！

总结一下：

1. 我们要知道 `useState`的运行过程，n 是怎么进行改变的
2. 当使用两个 `state`的时候要保证不冲突，所以要把 state 定义成数组用来存储
3. 使用 `currentIndex` 记录当前的 index
4. 在 App 渲染之前要重置 `index = 0`，否则 state 数组会变长！

useState很明显的缺点

  1. useState 调用顺序不能乱

    • 如果第一次渲染时 n 是第一个，m是第二个，k是第三个
    • 则第二次渲染时必须保证顺序完全一致
    • 所以React不允许出现以下代码

    不允许出现的代码：

    if( n % 2 === 0){
	[m, setM] = React.useState(0);
}

    否则会报错：

    /*
React Hook 'React.useState' is called conditionally. React Hooks must be called in the exact same order in every component render.

    这个报错的原理其实就是我们存储state的数组的顺序是必须要一致的，否则如果存在判断语句的话 state的调用顺序不一致，就会导致 state的值混乱！这会直接导致出现bug或者错误！！

  2. App 用了 _state 和 index，那其他组件还能用吗？

    • 我们可以给每个组件都创建 _state 和 index

  3. _state 和 index 放在全局作用域重名了咋办？

    • 每个组件都有一个虚拟DOM节点
    • 我们可以把 _state和index放到虚拟DOM上
03-26 02:17
Powered by LMLPHP ©2024 feshin 0.070488