react函数学习——useState函数

在 React 中，useState 是一个钩子（hook），用于在函数组件中添加状态管理功能。它返回一个数组，包含两个元素：

1. 当前状态值（selectedValue）：这是状态的当前值。
2. 更新状态的函数（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> ); }

解释

1. const [selectedValue, setSelectedValue] = useState('')：

   • selectedValue 是当前的状态值。在这个例子中，它的初始值是空字符串 ''。
   • setSelectedValue 是更新状态的函数。你可以调用这个函数来改变 selectedValue 的值。

2. 更新状态：

   • 在 handleChange 函数中，通过 setSelectedValue(event.target.value) 更新状态。这个函数会触发组件的重新渲染，使新的状态值反映在 UI 上。

注意事项

• 状态更新是异步的：调用 setSelectedValue 不会立即更新 selectedValue 的值。状态更新通常会被异步处理，React 会批量更新状态并重新渲染组件。

• 函数式更新：如果你需要基于当前状态计算新的状态值，建议使用函数式更新。比如：

  setSelectedValue(prevValue => prevValue + ' updated');

  这可以确保你获得的是最新的状态值，特别是在多次更新时。