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并检查是否有带待处理的更新。

相关推荐
百万蹄蹄向前冲2 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗12 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透2 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子2 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF2 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane3 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip3 小时前
可重试接口请求
前端·javascript
若梦plus3 小时前
模块化与package.json
前端
烛阴3 小时前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus3 小时前
Node.js中util.promisify原理分析
前端·node.js