[React]初步了解State | State的更新

最新推荐文章于 2024-07-24 23:11:47 发布

marongzhen

最新推荐文章于 2024-07-24 23:11:47 发布

阅读量2k

点赞数 36

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/marongzhen/article/details/135856360

版权

`State`的实现

我们知道，在 React 中，组件内部某些属性的值依靠对应的 state 进行储存记忆

useState 的唯一参数是 state 变量的初始值，每一次组件渲染时， useState 会返回一个数组，其中包含：

state 变量，会保存上次渲染的值
state setter 函数，用于更新 state 变量的值

在实际运用中，state 是通过这样的步骤运行的

组件进行第一次渲染。此时传入 useState 的初始值作为 state 变量的值。
更新 state 。当调用 state setter 函数时，会传入一个新的 state 值，React 现在记住新的值并进行下一步渲染。
组件的第二次渲染。 此时 useState 的参数依然是初始值，但 state setter使 React 记住了新值，所以会返回 [newState, stateSetter]

关于`UseState`的工作原理

在 React 内部，为每个组件保存了一个数组，其中每一项都是一个 state 对。
它维护当前 state 对的索引值，在渲染之前将其设置为 “0”。
每次调用 useState 时，React 都会为你提供一个 state 对并增加索引值

`useState` 调用，`state`初始化

function Gallery() {
  // 每次调用 useState() 都会得到新的 pair
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);
  //...
    
}

在 useState 内部

let componentHooks = [];
let currentHookIndex = 0;

function useState(initialState) {
  let pair = componentHooks[currentHookIndex];
  //...
  pair = [initialState, setState]
  //...
  componentHooks[currentHookIndex] = pair;
  currentHookIndex++;
  return pair;
}

依据传入的initialState进行初始化，在componentHooks 中存储pair，并更新currentHookIndex

使用`setState`进行 `state` 的更新

let componentHooks = [];
let currentHookIndex = 0;

function useState(initialState) {
  let pair = componentHooks[currentHookIndex];
  if (pair) {
    // 非首次渲染，pair已经存在
    // 将其返回并为下一次 hook 的调用做准备
    currentHookIndex++;
    return pair;
  }

  pair = [initialState, setState];
  
  function setState(nextState){
    //将新的值放入pair
    pair[0] = nexxtState;
    //UpdateDom将currentHookIndex赋值为0，保证了每一次更新的state都在initialState序号为零的位置
    UpdateDom();
  }
  //存储pair用于之后的渲染
  //并为下一次的hook调用做准备
  componentHooks[currentHookIndex] = pair;
  currentHookIndex++;
  return pair;
}

`DOM`的渲染

function updateDOM() {
  // 在渲染组件之前
  // 重置当前 Hook 的下标
  currentHookIndex = 0;

  // 更新 DOM 的具体代码省略
  //...

如果一个组件进行两次渲染，那么每个组件副本都会有独立的 state

渲染与提交

渲染

组件被 React 渲染之后，显示到页面中。组件的渲染包括三个步骤：

触发一次渲染
- 组件的 初次渲染。
- 组件（或者其祖先之一）的 状态发生了改变。
渲染组件
- 在进行初次渲染时, React 会调用根组件。
- 对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件。
提交到 DOM
- 对于初次渲染， React 会创建的所有 DOM 节点放在屏幕上。
- 对于重渲染， React 将应用最少的必要操作，以使得 DOM 与最新的渲染输出相互匹配。

渲染与 `state`

设置 state 会触发渲染，而渲染会产生一张快照。
在一次渲染中，state 不会发生改变，React会使 state 的值始终”固定“在一次渲染的各个事件处理函数内部。
state 改变是通过重新渲染实现的

因此，对于重复的setState：

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

此次渲染的number都是同一个值，多次调用setNumber 不会使number+3

setNumber 事实上是告知了React:我下一次渲染的时候，这个number要加一。

而多次的setNumber ，仅仅只是告知了三次number要加一，而非number要加三

将多次更新加入队列

setState(x)实际上会像 setState(n => x) 一样运行

setState的参数实际感觉起来更像是一个回调

因此如果使用这样的方法，我们可以实现将一系列更新通过一次渲染实现：

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

React 是这样处理的：