React Hooks是如何保存的

React 函数式组件是没有状态的,需要 Hooks 进行状态的存储,那么状态是怎么存储的呢?Hooks是保存在 Fiber 树上的,多个状态是通过链表保存,本文将通过源代码分析 Hooks 的存储位置。

创建组件

首先我们在组件中添加两个 state,counterState 和 infoState

复制代码
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  const [counter, setCounter] = useState(10)
  const [info, infoState] = useState(20)
  const handleInputChange = (event) => {
    setCounter(event.target.value);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload. {counter} {info}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <input onChange={handleInputChange}></input>
        
      </header>
    </div>
  );
}

export default App;

useState 绑定过程

在 useState 加断点进入代码, 可以看到代码调用dispacher.useState:

dispatcher.useState 初始化状态

绑定WIP hooks

初始化 hooks 链表,代码中有两个 State,所以会调用两次,

useState 更新

更新数据,启动页面更新渲染

进入 Hook 更新方法

进入updateReducer

获取当前 hook

Hooks Queue中保存着需要更新的数据

更新状态

总结

useState 初始化时,会创建 hooks 链表,并保存到 FilberNode 的memoizedState

属性上,更新时,从 FiberNode 上获取hooks并检查是否有带待处理的更新。

相关推荐
excel1 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel2 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼4 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping4 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙5 小时前
[译] Composition in CSS
前端·css
白水清风5 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix5 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278005 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端5 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧5 小时前
Promise 的使用
前端·javascript