React 中的 useState

useState 基础使用

• useState 是一个 ReactHook 函数，其作用是向组件添加一个状态变量，从而控制影响组件的渲染结果

• 本质：和普通 JS 变量不同的是，状态变量一旦发生变化，组件的视图 UI 也跟着变化（数据驱动视图）

• 关于 useState 函数说明

  const [count, setCount] = useState(0)
  

  • useState 是一个函数，返回值是一个数组
  • 数组中的第一个参数是一个状态变量，第二个参数是 set 函数用来修改状态变量
  • useState 的参数将作为 count 的初始化值

• 关于 useState 示例（使用 useState 实现一个计数器按钮）

  import { useState } from "react"
  
  function App() {
    // 1、调用 useState 添加一个状态变量
    // count 状态变量
    // setCount 修改状态变量的方法
    const [count, setCount] = useState(0)
  
    // 2、点击事件回调
    const handleClick = ()=>{
      // 作用：
      // 1、用传入的新值修改 count
      // 2、重新使用新的 count 渲染 UI
      setCount(count+1)
    }
    return (
      <div className="App">
        <button onClick={handleClick}>{count}</button>
      </div>
    );
  }
  

修改状态的规则

• 状态不可变

  • 在 React 中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

  • 直接修改不会引发视图更新

      const handleClick = ()=>{
        count++
      }
    

  • 使用 setCount 更新 count 值，才生效

      const handleClick = ()=>{
        setCount(count+1)
      }
    

• 修改对象状态

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

    import { useState } from "react"
    
    function App() {
      const [from, setFrom] = useState({name:"xiaoming"})          
      const handleClick = ()=>{
       setFrom({
        ...from,
        name:"xiaobai"
       })
      }
      return (
        <div className="App">
          <button onClick={handleClick}>{from.name}</button>
        </div>
      );
    }
    
    export default App;