6. React useState基础使用：useState修改状态的规则；useState修改对象状态的规则

6. useState基础使用：useState修改状态的规则；useState修改对象状态的规则

useState基础使用
useState修改状态的规则
useState修改对象状态的规则

useState基础使用

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

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

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

完整代码如下：

javascript 复制代码

// useState 实现一个计数器按钮
import { useState } from 'react';

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

    // 2. 点击事件回调：创建一个按钮，点击按钮时调用setCount方法，将count值加1
    const handleClick = () => {
        // 作用：
        // 1. 修改状态变量的值
        // 2. 触发组件重新渲染，显示最新的状态变量值
        setCount(count + 1);
    };

    return (
        <div className="App">
            这是 App4.js<br/>
            <button onClick={handleClick}>{count}</button>
        </div>
    );
}

export default App4;

useState修改状态的规则

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

完整代码如下：

javascript 复制代码

// useState 实现一个计数器按钮
import { useState } from 'react';

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

    const handleClick = () => {
        // 直接修改count值，不会触发组件重新渲染
        count++;
        console.log(count);
        // setCount(count);
    };

    return (
        <div className="App">
            这是 App4.js<br/>
            <button onClick={handleClick}>{count}</button>
        </div>
    );
}

export default App4;

useState修改对象状态的规则

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

完整代码如下：

javascript 复制代码

// useState 实现一个计数器按钮
import { useState } from 'react';

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

    const handleClick = () => {
        // 直接修改count值，不会触发组件重新渲染
        // count++;
        // console.log(count);
        setCount(count);
    };

    // 修改对象状态
    const [obj, setObj] = useState({
        name: '张三'
    });

    const changeObj = () => {
        // 错误写法：直接修改
        // obj.name = '张三1';

        // 正确写法：创建新的对象
        setObj({
            ...obj,
            name: '张三1'
        });
    };

    return (
        <div className="App">
            这是 App4.js<br/>
            <button onClick={handleClick}>{count}</button><br/>
            <button onClick={changeObj}>{obj.name}</button><br/>
        </div>
    );
}

export default App4;