React Hooks是如何保存的

hawk2014bj2024-05-31 19:21

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;