React中的useState 和useEffect

useState 和 useEffect是 React 中最常用的两个 Hook。

一、useState：给组件添加"记忆小本本"

想象你的组件是个健忘的人，useState 就是给它一个记事本，让它能记住一些事情（数据）。

基本用法：

import { useState } from 'react';

function Counter() {
  // count 是当前记住的值
  // setCount 是修改这个值的方法
  const [count, setCount] = useState(0); // 初始值设为0

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我加一
      </button>
    </div>
  );
}

关键点解释：

1. useState(初始值)：创建一个"记忆单元"，比如 useState(0) 就是记一个数字，初始为0
2. 返回数组：[当前值, 修改函数]，通常用解构语法获取：

   const [count, setCount] = useState(0);
   

3. 修改状态：必须用 setCount 函数修改，直接改 count 无效！
4. 重新渲染：每次调用 setCount，组件都会自动刷新显示最新值

实际类比：

二、useEffect：组件的"生活管家"

想象你的组件有日常生活（显示内容），但还需要做额外的事（比如取数据、设定时器）。useEffect 就是它的生活管家，帮它处理这些"副业"。

基本结构：

useEffect(() => {
  // 这里写要执行的"副业任务"
  
  return () => { 
    // 可选：这里写清理任务（比如关定时器）
  };
}, [依赖项]); // 控制执行时机的"任务清单"

三种常用模式：

1. 每次渲染后都执行（新手慎用）

useEffect(() => {
  console.log("我每次渲染都会跑！");
}); // 注意：没有依赖项数组

2. 只在首次加载执行（类似 componentDidMount）

useEffect(() => {
  console.log("我只在组件出生时执行一次");
  
  // 清理函数（类似 componentWillUnmount）
  return () => console.log("组件销毁时执行");
}, []); // 空依赖数组

3. 当特定数据变化时执行（类似 componentDidUpdate）

const [user, setUser] = useState(null);

useEffect(() => {
  if(user) {
    console.log(`用户变成：${user.name}`);
  }
}, [user]); // 监听 user 的变化

三、真实场景演示

场景：用户计数器 + 实时显示窗口大小

import { useState, useEffect } from 'react';

function SmartComponent() {
  // 状态1：计数
  const [count, setCount] = useState(0);
  
  // 状态2：窗口宽度
  const [width, setWidth] = useState(window.innerWidth);

  // 副作用1：监听窗口变化
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    
    window.addEventListener('resize', handleResize);
    
    // 清理函数：组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空数组：只运行一次

  // 副作用2：计数变化时修改标题
  useEffect(() => {
    document.title = `点了${count}次`;
  }, [count]); // 依赖 count

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        点击计数 ({count})
      </button>
      <p>窗口宽度: {width}px</p>
    </div>
  );
}

四、核心口诀总结

五、常见问题解答

Q：为什么有时候 useEffect 会无限循环？
A：因为没有正确设置依赖数组。比如你在 effect 里修改了依赖项的状态，就会循环触发。

Q：useState 可以存对象吗？
A：可以！useState({ name: 'John' })，但更新时要创建新对象：

setUser({ ...user, age: 30 }); // 正确！展开旧对象

Q：多个 useEffect 会按什么顺序执行？
A：按代码书写顺序执行，类似队列。

现在你已掌握了 React 最核心的两个 Hook！记住这个比喻：

• useState 是组件的 笔记本（存储数据）
• useEffect 是组件的 秘书（处理杂事）

接下来可以尝试写个小项目巩固理解，比如：待办清单（用 useState 存列表） + 数据持久化（用 useEffect 存 localStorage）