React Learning Notes

Appearance

State 组件的记忆 ​

🔍 什么是State？ ​

  • 状态(State) 是组件特有的记忆，用于记住用户交互产生的数据
  • State 使组件能够在多次渲染之间保持数据
  • State 通过 useState Hook 提供，它是React的内置函数

🌟 为什么需要State？ ​

  • 普通变量在组件重新渲染时会被重置，无法持久保存数据
  • 修改普通变量不会触发React重新渲染组件
  • State解决了这两个问题：保留数据 和 触发重新渲染

📦 添加State变量 ​

基本语法 ​

jsx
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  // ...
}

🔄 useState返回什么？ ​

  • useState 返回一个有两个元素的数组：
    1. 当前state值 - 可以在渲染中使用
    2. setter函数 - 用于更新state并触发重新渲染

🛠️ 更新State ​

jsx
function handleClick() {
  setCount(count + 1); // 更新state并触发重新渲染
}

🪝 认识你的第一个Hook ​

  • 以 use 开头的函数在React中被称为 Hook
  • Hooks 是特殊函数，只在React渲染时有效
  • Hooks 必须在组件或自定义Hook的顶层调用
  • 不能在条件语句、循环或嵌套函数中调用Hooks

🧩 剖析useState工作原理 ​

  1. 组件首次渲染:

    • React创建state变量，并用初始值初始化它
    • 返回[当前值, setter函数]

  2. 状态更新:

    • 调用setter函数
    • React将新值排入队列
    • 触发重新渲染

  3. 组件重新渲染:

    • React使用最新的state值渲染组件

🔢 组件中使用多个State变量 ​

jsx
function Form() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');
  // ...
}
  • 可以根据相关性将state拆分为多个变量
  • React根据它们的声明顺序识别state变量

🔒 State的隔离与私有性 ​

  • State是隔离的：同一个组件渲染多次，每个实例都有自己完全独立的state
  • State是私有的：state完全私有于声明它的组件
  • 父组件无法直接修改子组件的state
  • 要共享state，需要将state提升到最近的共同父组件中

💡 最佳实践 ​

  • 将相关状态放在一起，将不相关状态分开
  • 避免重复或冗余的state
  • 避免在state中存储可以从props或现有state计算得出的数据
  • 当更新state依赖于之前的state值时，使用函数形式的更新
    jsx
    setCount(prevCount => prevCount + 1);

📝 总结 ​

  • 🧠 当组件需要"记住"信息时，使用state变量
  • 🪝 State变量通过useState Hook声明
  • 📦 useState返回一对值：当前state和更新函数
  • 🔒 State是组件私有的，且在不同实例之间相互隔离
  • 🔍 React通过声明顺序识别state变量
  • 🚫 Hooks只能在组件顶层调用，不能在条件或循环中调用

参考：React官方文档-State：组件的记忆