第8章 State与组件生命周期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

function Temperature() {
  // 这就是 State：组件自己管理的温度数据
  // 当 temperature 变化时，这个组件会重新渲染
  const [temperature, setTemperature] = useState(25)

  function handleIncrease() {
    setTemperature(temperature + 1)
  }

  return (
    <div>
      <p>当前温度：{temperature}°C</p>
      <button onClick={handleIncrease}>升温</button>
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Props 和 State 的典型使用场景
function UserCard({ name, age } /* ← Props：父组件给的 */) {
  // State：组件自己控制的"本地状态"
  const [isExpanded, setIsExpanded] = useState(false)  // 是否展开
  const [likeCount, setLikeCount] = useState(0)        // 点赞数

  return (
    <div className={`user-card ${isExpanded ? 'expanded' : ''}`}>
      {/* Props：只读，不应该被修改 */}
      <h2>{name}</h2>
      <p>年龄：{age}</p>

      {/* State：可以修改 */}
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '收起' : '展开'}
      </button>

      <button onClick={() => setLikeCount(likeCount + 1)}>
        👍 {likeCount}
      </button>

      {/* 展开时显示更多信息 */}
      {isExpanded && (
        <div className="extra-info">
          <p>这是一个展开后的详细信息区域</p>
        </div>
      )}
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 判断：下面这些场景该用 State 还是 Props？

// 场景1：用户点击按钮，计数器+1
// → 用 State，因为是组件内部产生的变化
const [count, setCount] = useState(0)

// 场景2：父组件传入一个用户名，显示出来
// → 用 Props，因为是外部数据
function UserName({ name }) { return <span>{name}</span> }

// 场景3：输入框里用户正在输入的文字
// → 用 State，因为是组件内部产生的随时变化的数据
const [inputValue, setInputValue] = useState('')
<input value={inputValue} onChange={e => setInputValue(e.target.value)} />

// 场景4：从 API 获取的文章列表，传给列表组件
// → 用 Props，因为数据来自外部
<PostList posts={posts} />

1
2
3
4
5
6
7
8
9

import { useState } from 'react'

// useState 返回一个数组：[状态值, 更新状态的函数]
// 解构赋值拿到两个元素
const [count, setCount] = useState(0)

// count    → 当前的状态值
// setCount → 用来更新状态的函数（叫 setCount 是约定俗成的，但不是强制的）
// useState(0) → 初始值为 0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      {/* 直接在 JSX 里使用 count */}
      <p>当前计数：{count}</p>

      {/* 在事件处理器里读取 count */}
      <button onClick={() => {
        const newCount = count + 1
        console.log('当前是:', count, '即将变成:', newCount)
        setCount(newCount)
      }}>
        +1
      </button>
    </div>
  )
}

1
2
3
4
5
6
7
8

const [count, setCount] = useState(0)

// 方式一：直接传新值（简单场景用这个）
setCount(10)  // count 变成 10

// 方式二：传一个函数（基于前一个 state 计算新 state 时用这个）
setCount(prevCount => prevCount + 1)  // count 变成 11
// prevCount 是更新前的 state 值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// ❌ 错误示例：连续调用 3 次 setCount(count + 1)
// 由于批量更新的存在，count 可能只会加 1，而不是加 3
function BadCounter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)  // 读取的是 0
    setCount(count + 1)  // 读取的还是 0（因为批量更新，count 还没变）
    setCount(count + 1)  // 读取的还是 0
  }
  // 结果：count = 1，而不是预期的 3
}

// ✅ 正确示例：用函数式更新，3 次都正确累加
function GoodCounter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(prev => prev + 1)  // 1
    setCount(prev => prev + 1)  // 2
    setCount(prev => prev + 1)  // 3
  }
  // 结果：count = 3 ✅
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 初始值是数字
const [count, setCount] = useState(0)
// setCount: React.Dispatch<React.SetStateAction<number>>

// 初始值是字符串
const [name, setName] = useState('小明')
// setName: React.Dispatch<React.SetStateAction<string>>

// 初始值是对象
const [user, setUser] = useState({ name: '小明', age: 25 })
// setUser: React.Dispatch<React.SetStateAction<{ name: string; age: number }>>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function UserForm() {
  // 每个 useState 管理一个独立的状态
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [age, setAge] = useState(18)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState(null)

  function handleSubmit() {
    setIsSubmitting(true)
    setError(null)
    // 模拟提交
    setTimeout(() => {
      console.log({ name, email, age })
      setIsSubmitting(false)
    }, 1000)
  }

  return (
    <form>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="姓名"
      />
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <input
        type="number"
        value={age}
        onChange={e => setAge(Number(e.target.value))}
      />
      {error && <p className="error">{error}</p>}
      <button
        onClick={handleSubmit}
        disabled={isSubmitting}
      >
        {isSubmitting ? '提交中...' : '提交'}
      </button>
    </form>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 直接写初始值
const [count, setCount] = useState(0)
const [name, setName] = useState('小明')
const [isActive, setIsActive] = useState(false)
const [items, setItems] = useState([])

// 从变量传入初始值
const initialCount = 10
const [count, setCount] = useState(initialCount)

// 从函数计算初始值（惰性初始化）
const [data, setData] = useState(() => {
  // 这个函数只会在首次渲染时执行一次
  const saved = localStorage.getItem('data')
  return saved ? JSON.parse(saved) : defaultData
})

1
2
3
4
5
6
7
8

// ❌ 低效：每次渲染都会重新解析 localStorage
const [data, setData] = useState(() => { const saved = localStorage.getItem('data'); return saved ? JSON.parse(saved) : null; })

// ✅ 高效：只在首次渲染时执行一次
const [data, setData] = useState(() => {
  const saved = localStorage.getItem('data')
  return saved ? JSON.parse(saved) : null
})

1
2
3
4
5
6
7

// React 18+：所有 setState 自动批量更新
function handleClick() {
  setCount(1)    // 队列：count = 1
  setName('小明') // 队列：name = '小明'
  setAge(25)     // 队列：age = 25
  // React 会在这之后一次性重新渲染，只渲染一次！
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// React 18 之前：fetch 回调中的 setState 不会被批量处理
function fetchUser() {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => {
      setUser(data)        // 触发一次渲染
    })
    .then(() => {
      setLoading(false)    // 再触发一次渲染（性能浪费！）
    })
}

// React 18+：自动批量处理，只触发一次渲染
function fetchUser() {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => {
      setUser(data)
      setLoading(false)  // 这次不会立即渲染，而是和上面的一起批量更新
    })
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// ❌ 不推荐：所有状态放一个对象
const [state, setState] = useState({
  name: '',
  age: 0,
  email: '',
  isLoading: false,
  error: null,
  data: []
})

// 更新时需要这样写：
setState(prev => ({ ...prev, name: '小明' }))  // 每次都要展开整个对象！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// ✅ 推荐：按业务意义拆分
const [name, setName] = useState('')
const [age, setAge] = useState(0)
const [email, setEmail] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState(null)
const [data, setData] = useState([])

// 更新时直接调用对应 setter，不需要展开对象
setName('小明')
setIsLoading(false)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 场景：分页状态
// 当前的页码和每页条数通常一起变，放一起更方便
const [pagination, setPagination] = useState({
  page: 1,
  pageSize: 10
})

// 更新时一起更新
setPagination(prev => ({ ...prev, page: prev.page + 1 }))
// 或者一次性设置
setPagination({ page: 1, pageSize: 20 })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// ❌ 错误：直接覆盖整个对象，其他属性会丢失！
setUser({ name: '新名字' })  // age、email 等其他属性全丢了！

// ✅ 正确：展开 + 覆盖
setUser(prev => ({
  ...prev,    // 先展开旧对象，保留其他属性
  name: '新名字'  // 再覆盖要改的属性
}))

// ✅ 也正确：深度展开
setFormData(prev => ({
  ...prev,
  user: {
    ...prev.user,
    name: '新名字'
  }
}))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const [items, setItems] = useState(['苹果', '香蕉', '橙子'])

// 增加
function addItem(item) {
  setItems(prev => [...prev, item])  // 在末尾添加
  // 或者 setItems(prev => [item, ...prev]) 在开头添加
}

// 删除
function removeItem(index) {
  setItems(prev => prev.filter((_, i) => i !== index))
}

// 修改
function updateItem(index, newValue) {
  setItems(prev => prev.map((item, i) => i === index ? newValue : item))
}

// 查找
function findItem(name) {
  return items.find(item => item === name)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// ❌ 冗余：firstName 和 lastName 已经存在了，fullName 不需要单独存
const [firstName, setFirstName] = useState('张')
const [lastName, setLastName] = useState('三')
const [fullName, setFullName] = useState('张三')  // 这就是冗余！

// ✅ 正确：fullName 通过计算得到，不需要单独的 state
function UserName() {
  const [firstName, setFirstName] = useState('张')
  const [lastName, setLastName] = useState('三')

  // 直接计算，永远是最新的
  const fullName = `${lastName}${firstName}`

  return (
    <div>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      <input value={lastName} onChange={e => setLastName(e.target.value)} />
      <p>全名：{fullName}</p>
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import React from 'react'

class Counter extends React.Component {
  // 1. 构造函数：初始化 state 和绑定 this
  constructor(props) {
    super(props)  // 必须调用 super(props)，否则 this.props 是 undefined
    this.state = {
      count: 0,
      name: '计数器'
    }
    // this 绑定：把 handleClick 的 this 绑定到当前组件实例
    this.handleClick = this.handleClick.bind(this)
  }

  // 2. 渲染方法：返回 JSX
  render() {
    // 通过 this.state 访问状态
    // 通过 this.props 访问 props
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>计数：{this.state.count}</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }

  // 3. 点击处理方法
  handleClick() {
    // 更新 state 必须用 this.setState()
    // this.setState() 会触发组件重新渲染
    this.setState({
      count: this.state.count + 1
    })
  }
}

export default Counter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

render() {
  // 直接读取
  const count = this.state.count
  const name = this.state.name

  // 解构赋值
  const { count, name } = this.state

  return <p>{count} - {name}</p>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 方式一：直接传对象（会合并到 state）
this.setState({ count: 10 })

// 方式二：传函数（基于前一个 state）
this.setState(prevState => ({
  count: prevState.count + 1
}))

// setState 是异步的！
// 下面的代码中，直接读取 this.state.count 可能还是旧值
this.setState({ count: this.state.count + 1 })
console.log(this.state.count)  // 可能是更新前的值！

// 正确做法：使用 setState 的回调函数获取更新后的值
this.setState(
  { count: this.state.count + 1 },
  () => console.log('更新后的 count:', this.state.count)  // 这个回调在更新完成后调用
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log('1. constructor: 组件正在被创建')
    this.state = { data: null }
  }

  componentDidMount() {
    console.log('3. componentDidMount: 组件已经挂载到 DOM 上了')
    // 通常在这里：请求数据、添加事件监听、设置定时器
    this.fetchData()
  }

  render() {
    console.log('2. render: 正在渲染...')
    return <div>内容</div>
  }
}

// 打印顺序：constructor → render → componentDidMount

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate: 组件更新了！')
    console.log('之前的 props:', prevProps)
    console.log('当前的 props:', this.props)
    console.log('之前的状态:', prevState)
    console.log('当前的状态:', this.state)

    // 常见用法：根据某个 prop 的变化来做点什么
    if (prevProps.userId !== this.props.userId) {
      this.fetchUserData(this.props.userId)
    }
  }

  render() {
    return <div>{this.props.content}</div>
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class MyComponent extends React.Component {
  componentDidMount() {
    // 设置定时器
    this.timer = setInterval(() => {
      console.log('计时中...')
    }, 1000)

    // 添加事件监听
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    console.log('componentWillUnmount: 组件即将被卸载，清理资源！')

    // 清理定时器（必须！否则会造成内存泄漏）
    clearInterval(this.timer)

    // 移除事件监听（必须！否则会造成内存泄漏）
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    return <div>计时组件</div>
  }
}