当前位置：首页 > news >正文

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

news 2025/10/11 6:06:00

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

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

useState基础使用

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

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

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

完整代码如下：

// useState 实现一个计数器按钮
import { useState } from 'react';function App4() {// 1. 调用 useState 添加一个状态变量// count 是状态变量，初始值为0// setCount 是修改状态变量的方法const [count, setCount] = useState(0);// 2. 点击事件回调：创建一个按钮，点击按钮时调用setCount方法，将count值加1const handleClick = () => {// 作用：// 1. 修改状态变量的值// 2. 触发组件重新渲染，显示最新的状态变量值setCount(count + 1);};return (<div className="App">这是 App4.js<br/><button onClick={handleClick}>{count}</button></div>);
}export default App4;

在这里插入图片描述

useState修改状态的规则

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

完整代码如下：

// 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方法一个全新的对象来进行修改。

完整代码如下：

// 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;