React - useState

1. 基础使用

useState 是 React 中的一个 Hook 函数，它允许我们向组件添加一个状态变量，从而控制/影响组件的渲染结果，注：状态变量一旦发生变化，组件的视图 UI 也会同步变化（数据驱动视图）

// useState
import { useState } from 'react'

function App() {
  // 1. 调用 useState 添加状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState(0)

  // 2. 点击事件回调
  const clickHandler = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      <button onClick={clickHandler}>{count}</button>
    </div>
  )
}

export default App

2. 修改状态的规则

（1）状态不可变

在 React 中，状态被认为是只读的，应秉持“替换它而不是修改它”的原则，直接修改状态不会触发视图的更新

import { useState } from 'react'

function App() {
  let [count, setCount] = useState(0)

  const clickHandler = () => {
    // setCount(count + 1)

    // 直接修改，值变化了，但不会触发视图的更新
    count++
    console.log('count:', count)
  }
  return (
    <div className="App">
      <button onClick={clickHandler}>{count}</button>
    </div>
  )
}

export default App

（2）修改对象状态

对于对象类型的状态变量，应该始终传给 set 方法一个全新的对象来进行修改

import { useState } from 'react'

function App() {
  // 修改对象
  const [form, setForm] = useState({
    name: '孙笑川',
    age: 33
  })

  const changeForm = () => {
    setForm({
      ...form,
      name: '药水哥',
      age: '30'
    })
  }
  return (
    <div className="App">
      <p>姓名：{form.name}</p>
      <p>年龄：{form.age}</p>
      <button onClick={changeForm}>修改对象</button>
    </div>
  )
}

export default App