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

相关推荐
爱喝水的小周37 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021140 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅43 分钟前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃1 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD1 小时前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端