四、【react】useState

useState是一个react hook函数,它允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果

const [count,setCount] = useState(0)
  1. useState是一个函数,返回值是一个数组
  2. 数组的第一个参数是状态变量,第二个参数是set函数用来修改状态变量
  3. useState的参数将作为初始值
import { useState } from "react";
function App() {
  // 1、调用useState添加一个状态变量count,初始值为0,setCount是更新状态变量的函数
  const [count,setCount] = useState(0);
  // 2、定义一个函数handleClick,点击按钮时,将count加1
  const handleClick = () => {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}
export default App;

对象和数组

import { useState } from "react";
function App() {
  // 1、调用useState添加一个状态变量count,初始值为0,setCount是更新状态变量的函数
  const [count,setCount] = useState(0);
  // 2、定义一个函数handleClick,点击按钮时,将count加1
  const handleClick = () => {
    // 3、调用setCount更新状态变量,这个地方不能直接写count=count+1,因为只有调用setCount才能触发重新渲染
    setCount(count+1);
  }

  // 对象的替换
  const [form,setForm] = useState({name:'jack',age:'10'});
  const handleFormClick = () => {
    setForm({...form,name:'lily',age:'12'});
    console.log('form:',form)
  }
  
  // 数组
  const [list,setList] = useState([1,2,3]);
  const handleListClick = () => {
    const len = list.length + 1
    setList([...list,len]);
  }

  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
      <button onClick={handleFormClick}>{'my name is '}{form.name}</button>
      <button onClick={handleListClick}>{'check me list add one'}</button>
      <ul>
        {list.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}
export default App;
import { useState } from "react"

function MyApp() {
  const [count,setCount] = useState(0)
  const [person,setPerson] = useState({name: "John", age: 30}
  const [arr,setArr] = useState([1,2,3])


  const clickHandler = () =>{
    setCount(count+1)
  }
  const changePersonHandler = () => {
    setPerson({name: person.name+"1", age: person.age+1})
  }
  const popArr = () => {
    setArr([...arr,6])
  }

  return (
    <div>
      <button onClick={clickHandler}>{count}</button>
      <div>{person.name}, {person.age}</div>
      <button onClick={changePersonHandler}>change person</button>
      <ul>
        {arr.map((item,index)=><li key={index}>{item}</li>)}
      </ul>
      <button onClick={popArr}>pop</button>
    </div>
  )
}
export default MyApp
### ReactuseState 的用法详解 #### 初始化状态 在 React 中,`useState` 是一个 Hook,用于在函数组件中添加状态管理功能。通过 `useState`,可以初始化组件的状态值。初始化状态时,需要提供一个初始值,该值可以是任何 JavaScript 数据类型(如数字、字符串、对象等)。以下是一个简单的示例,展示如何使用 `useState` 初始化状态[^2]。 ```javascript import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); // 初始化状态为 0 return ( <div> <p>当前计数: {count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); } export default App; ``` #### 更新状态 `useState` 提供了一个更新状态的函数,即 `setState`。调用此函数会触发组件重新渲染,并将状态更新为新的值。需要注意的是,React 会对多个状态更新进行批处理以提高性能[^2]。以下是更新状态的几种常见方式: 1. **基础状态更新**:直接传递新值给 `setState`。 ```javascript setCount(count + 1); // 将 count 增加 1 ``` 2. **函数式更新**:当新状态依赖于前一个状态时,推荐使用函数式更新。这种方式可以确保状态更新的顺序性[^2]。 ```javascript setCount(prevCount => prevCount + 1); ``` 3. **对象状态更新**:如果状态是一个对象,更新时需要手动合并对象[^2]。 ```javascript const [user, setUser] = useState({ name: '', age: 0 }); setUser({ ...user, name: 'Alice' }); // 更新 name 属性 ``` 4. **强制刷新**:可以通过 `useState` 模拟强制刷新操作。每次传递一个新对象给 `setState`,都会触发组件重新渲染[^4]。 ```javascript const [, forceUpdate] = useState({}); const onRefresh = () => forceUpdate({}); // 强制刷新 ``` #### 示例代码 以下是一个完整的示例,展示了如何初始化状态和更新状态: ```javascript import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // 初始化状态 return ( <div> <p>当前计数: {count}</p> <button onClick={() => setCount(count + 1)}>增加</button> <button onClick={() => setCount(count - 1)}>减少</button> <button onClick={() => setCount(0)}>重置</button> </div> ); } export default Counter; ``` ### 高级用法 对于复杂的状态管理场景,可以结合多个 `useState` 或者使用 `useReducer` 来替代[^3]。例如,在用户配置面板中,可以分别管理不同的状态变量: ```javascript function UserSettings() { const [username, setUsername] = useState('游客'); const [theme, setTheme] = useState('light'); const [notifications, setNotifications] = useState(true); return ( <div> <p>用户名: {username}</p> <input onChange={e => setUsername(e.target.value)} /> <p>主题: {theme}</p> <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 切换主题 </button> </div> ); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值