ReactJS 钩子 useState 的 5 个用例

useState是一个 Hook，需要在函数组件内部调用，以向其添加一些本地状态。React 会在组件重新渲染之间保留此状态。

钩子的用例有很多useState，但在本文中，我将重点介绍以下五个：

`useState`用例

状态管理
条件渲染
切换标志（真/假）
柜台
获取 API 数据并将其存储在状态中

状态管理

首先要警告一下：不要以这种方式编写代码，因为它会创建无限循环：

import { useState } from "react";

const UseCaseStateManagement = props => {
    const [state, setState] = useState('initial value');

    setState('new value');
    console.log(state);

    return (
        <>
            <h2>useState use case</h2>
            <h3>State management</h3>
            <hr />
            <p>{state}</p>
        </>
    );
};

export default UseCaseStateManagement;

创建循环是因为初始渲染调用状态更新函数setState，该函数及时触发重新渲染和新的函数评估。

如果我们想根据用户的操作改变状态，我们可以这样做：

import { useState } from "react";

const UseCaseStateManagement = props => {
    const [state, setState] = useState('initial value');

    console.log('🔄 This is a re-render');

    const clickHandler = () => {
        setState('new value');
    };

    return (
        <>
            <h2>useState use case</h2>
            <h3>State management</h3>
            <hr />
            <button onClick={clickHandler}>Set state</button>
            <p>{state}</p>
        </>
    );
};

export default UseCaseStateManagement;

该状态将在组件重新渲染时保留，并且我们将能够在最新的重新渲染中使用它。

条件渲染

我们可以使用状态来有条件地渲染组件或其一部分。

import { useState } from "react";

const UseCaseConditionalRender = props => {
    const [condition, setCondition] = useState(false);

    const clickHandler = () => {
        setCondition(true);
    };

    return (
        <>
            <hr />
            <h2>useState use case</h2>
            <h3>Conditional Rendering</h3>
            <button onClick={clickHandler}>Set condition</button>
            {condition && <p>Hello!</p>}
        </>
    );
};

export default UseCaseConditionalRender;

切换标志

useState可用于在两个值之间切换，通常是true和false，以切换标志，例如显示模式：

import { useState } from 'react';
import classes from './UseCaseToggle.module.css';

const UseCaseToggle = props => {
    const [mode, setMode] = useState(false);

    // Use setState function form because the new state depends on the previous one
    const clickHandler = () => {
        setMode(prevState => !prevState);
    };

    const toggledClass = mode ? classes.light : classes.dark;

    return (
        <div className={toggledClass}>
            <hr />
            <h2>useState use case</h2>
            <h3>Toggle flags</h3>
            <button onClick={clickHandler}>Toggle display mode</button>
        </div>
    );
};

export default UseCaseToggle;

结果是组件上的暗模式和亮模式之间交替。

柜台

useState可用于通过多次重新渲染来跟踪变量，例如在计数器应用程序中：

import { useState } from "react";

const UseCaseCounter = props => {
    const [counter, setCounter] = useState(0);

    // Use setState function form because the new state depends on the previous one
    const clickHandlerDecrease = () => {
        // Converting the prevState to number to avoid errors
        setCounter(prevState => +prevState - 1);
    };

    const clickHandlerIncrease = () => {
        setCounter(prevState => +prevState + 1);
    };

    return (
        <>
            <hr />
            <h2>useState use case</h2>
            <h3>Counter</h3>
            <button onClick={clickHandlerDecrease}>--</button>
            <span> {counter} </span>
            <button onClick={clickHandlerIncrease}>++</button>
        </>
    );
};

export default UseCaseCounter;

获取 API 数据并将其存储在状态中

当我们需要与 API 交互时，会用到这个钩子更复杂的用法。在这种情况下，我们可以使用状态来存储fetch()API 的响应，并使用旋转器的状态来指示数据是否正在被获取。

import { useState } from "react";

const UseCaseApi = props => {
    const [starship, setStarship] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const clickHandler = async () => {
        setIsLoading(true);

        const response = await fetch('https://swapi.dev/api/starships/10');
        const data = await response.json();
        setStarship(JSON.stringify(data, null, "\t"));

        setIsLoading(false);
    };

    let message = '';
    if (isLoading) {
        message = <p>Getting data... 🚀</p>;
    }

    return (
        <>
            <hr />
            <h2>useState use case</h2>
            <h3>Get API data and store it in state</h3>
            <button onClick={clickHandler}>Get Millennium Falcon data</button>
            <p>{message}</p>
            <pre>{starship}</pre>
        </>
    );
};

export default UseCaseApi;

您可以在此处实时观看所有这些示例。

您还可以查看此存储库中的代码。

文章来源：https://dev.to/colocodes/5-use-cases-of-the-usestate-reactjs-hook-4n00

ReactJS 钩子 useState 的 5 个用例

ReactJS 钩子 useState 的 5 个用例

useState用例

状态管理

条件渲染

切换标志

柜台

获取 API 数据并将其存储在状态中

`useState`用例