react函数学习——useState函数
在 React 中，useState 是一个钩子（hook），用于在函数组件中添加状态管理功能。它返回一个数组，包含两个元素：
- 当前状态值（
selectedValue）：这是状态的当前值。 - 更新状态的函数（
setSelectedValue）：这是一个函数，你可以调用它来更新状态。
使用 useState
以下是 useState 的基本用法：
import React, { useState } from 'react';
function MyComponent() { // 初始化状态 const [selectedValue, setSelectedValue] = useState(''); // 处理状态更新的函数 const handleChange = (event) => { setSelectedValue(event.target.value); }; return ( <div> <input type="text" value={selectedValue} onChange={handleChange} /> <p>Current value: {selectedValue}</p> </div> ); }解释
-
const [selectedValue, setSelectedValue] = useState('')：selectedValue是当前的状态值。在这个例子中，它的初始值是空字符串''。setSelectedValue是更新状态的函数。你可以调用这个函数来改变selectedValue的值。
-
更新状态：
- 在
handleChange函数中，通过setSelectedValue(event.target.value)更新状态。这个函数会触发组件的重新渲染，使新的状态值反映在 UI 上。
- 在
注意事项
-
状态更新是异步的：调用
setSelectedValue不会立即更新selectedValue的值。状态更新通常会被异步处理，React 会批量更新状态并重新渲染组件。 -
函数式更新：如果你需要基于当前状态计算新的状态值，建议使用函数式更新。比如：
setSelectedValue(prevValue => prevValue + ' updated');这可以确保你获得的是最新的状态值，特别是在多次更新时。