React hook中的useState介绍及应用实例

React钩子是功能类中引入的最新功能，用于限制类组件的使用。

React支持两种类型的组件类型：

• 功能性组件：这些是有参数的函数，返回JJSX（javascript和HTML的混合）代码，在react V0.16.7版本之前没有状态管理，也称为无状态组件。
• 类组件：这些是有状态的组件，包含状态、生命周期方法，这些是通过扩展React.Component 类创建的。

在react最新版本中引入了几个钩子。useState 是React中引入的一个内置钩子，用于更新功能组件中的状态对象。

React功能组件中的useState

useState 简称为功能组件中的使用状态管理。

在功能组件中，使用useState钩子存储一个组件的本地状态。

一个状态可以是任何类型的--数组、对象、布尔值、数字和字符串等，useState只保存单一类型的数据。

首先，在组件中导入useState

import React, { useState } from 'react';

语法:

const [variable, setFunction] = useState(defaultValue);

variable 是一个分配有默认值的新状态变量。 setFunction是一个更新状态变量的函数。

useState的特点:

• 它可以用在功能组件或无状态组件中
• 一个组件的状态可以用它来管理
• 它总是返回一个初始值和一个函数来更新状态变量。
• 钩子不在反应类中使用

例子:给功能组件添加状态

让我们看一个例子，在React类组件中通过点击按钮来增加值

在反应类组件中:

• 状态存储为一个对象，意味着可以存储不同类型的数据（布尔值、数组）。

import React, { Component } from 'react';

class IncrementCounter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
    }
    incrementCounter() {
        this.setState(previous => ({ count: previous.count + 1 }));

    }
    render() {
        const { count } = this.state;
        return (
            <div>
                <p>Incremented to  {count}</p>

                <input type="button" name="countr" value="Increment" onClick={(e) => this.incrementCounter(e)} />
            </div>
        );
    }
}

export default IncrementCounter;

在React功能组件中使用State

上面的内容可以用函数式组件的useState钩子重写:

import React, { useState } from 'react';

function IncrementCounterHook(props) {
    const [counter, setCounter] = useState(0);

    return (
        <div>
            <div>Incremented to {counter}</div>
            <input type="button" name="countr" value="Increment" onClick={() => setCounter(counter + 1)} />

        </div>
    );
}

export default IncrementCounterHook;

让我们看几个例子来更新状态对象。

功能性组件中的状态和类组件有什么区别？

useState钩子更新功能组件中的数组

这个例子解释了在数组组件中存储或更新一个数组。下面的代码，提交带有输入名称的表单，并添加到功能组件的状态数组中

• useState被定义为初始状态为[] 。
• 它返回数组类型的状态变量employees和一个方法setEmployee来更新一个数组。
• addEmployee在按钮点击处理程序中被调用。
• setEmployees复制现有的雇员数组并添加新的值。
• 传播操作符...用于添加新的雇员到雇员。
• 最后使用数组映射函数显示状态数组

import React, { useState } from 'react';

function HookArray(props) {
    const [employees, setEmployees] = useState([]);
    const [name, setName] = useState("");

    const addEmployee = event => {
        event.preventDefault();
        setEmployees([
            ...employees,
            {
                name: name
            }
        ]);
        setName("");
    };

    return (
        <div>
            <>
                <form onSubmit={addEmployee}>

                    <label>Name
                        <input
                            name="name"
                            type="text"
                            value={name}
                            onChange={e => setName(e.target.value)}
                        />
                    </label>
                    <button name="Add" value="Add">Add</button>
                </form>
                <ul>
                    {employees.map(emp => (
                        <li key={emp.empid}>{emp.name}</li>
                    ))}
                </ul>
            </>
        </div>
    );
}

export default HookArray;