React - Hooks - useState

useState 是 React 中的一个 Hook，用于在函数组件中添加状态。它允许在组件中管理局部状态，并在状态更新时触发组件重新渲染。

基本语法

// useState 是一个函数，通常以如下方式导入使用
import React, { useState } from 'react';

// useState 返回一个包含两个元素的数组
const [state, setState] = useState(initialState);

// state：当前的状态值
// setState：更新状态的函数，用于设置新的状态值
// initialState：状态的初始值，可以是基本类型、对象或数组等

使用示例

1.基础示例

import React, { useState } from 'react';

const Counter = () => {
    // 使用 useState 初始化计数为 0
    const [count, setCount] = useState(0);

    const handleAdd= () => {
        // 更新状态，计数加 1
        //  第一种写法  
        // setCount(count + 1);
        // 第二种写法 回调形式
        setCount(count => count + 1)
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={handleAdd}>点击加一</button>
        </div>
    );
};

export default Counter;

2.使用对象作为状态

可以将 useState 的初始值设为对象，以便用来管理多个状态值。

import React, { useState } from 'react';

const User = () => {
    const [user, setUser] = useState({ name: "", age: 0 });

    const updateUser = () => {
        setUser({ name: "Alice", age: 25 });
    };
    // 通过 setUser 函数来更新整个对象
    return (
        <div>
            <h1>Name: {user.name}</h1>
            <h2>Age: {user.age}</h2>
            <button onClick={updateUser}>点击更新</button>
        </div>
    );
};

export default User;

注意事项

1.异步更新

状态更新可能是异步的，因此需要注意在更新状态后立即使用新状态值可能不会如预期工作。 如果需要基于前一个状态更新，建议使用回调形式更新状态。

setCount(prevCount => prevCount + 1);

2.合并状态

当使用对象或数组作为状态时，setState 不会自动合并对象的更新。如果需要更新对象的某个字段，需要手动地将当前状态展开。

setUser(prevUser => ({ ...prevUser, age: 26 }));

3.初始状态

可以将初始状态设为一个函数，这个函数只会在组件首次渲染时调用一次。

const [count, setCount] = useState(() => {
    return someExpensiveComputation();
});

 总结

• useState 是用来在函数组件中添加状态的 Hook。
• 可以使用它来管理简单的基本类型状态，也可以使用对象和数组来管理更复杂的状态。
• 记得处理状态更新时的异步性和合并状态的问题。