06.useState基础使用

useState基础使用

useState 是一个React Hook (函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

本质:和普通]S变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)

1.useState是一个函数，返回值是一个数组

2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量

3.usestate的参数将作为count的初始值

Text Only

import { useState } from "react";

function App() {
  // 1. 调用useState添加一个状态变量
  // count: 状态变量
  // setCount 修改状态变量方法
  // 0 初始值
  const [count,setCount]=useState(0);

  // 2. 点击事件回调
  const handleClick=()=>{
    // 用传入的新值修改count，重新渲染UI
    setCount(count+1);
  }
  return (
   <div className="App">
      <button onClick={handleClick}>{count}</button>
   </div>
  );
}

export default App;

状态不可变

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

Text Only

  const handleClick=()=>{
    // 错误
    // count++;//无效

    // 用传入的新值修改count，重新渲染UI
    setCount(count+1);
  }

修改对象状态

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

Text Only

import { useState } from "react";

function App() {
  const [form,setForm]=useState({name:"lily"});
  const changeForm=()=>{
    // 错误写法：直接修改
    // form.name='jack'

    setForm({
      ...form,
      name:"lucy"
    })
  }
  return (
   <div className="App">
      <button onClick={changeForm}>{form.name}</button>
   </div>
  );
}

export default App;