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

相关推荐
周亚鑫6 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.23 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia39 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫39 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html
Rattenking1 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js