React-Hooks-useState

Hook 概述

• Hook 就是一个特殊的函数

useState Hook 概述

• 可以让函数式组件保存自己状态的函数

使用 useState Hook

• Hook 只能在函数式组件中使用, 并且只能在函数体的最外层使用

有一个 useState 方法该方法接收一个参数：

• 参数：保存状态的初始值

返回值，是一个数组, 这个数组中有两个元素：

• 第一个元素: 保存的状态
• 第二个元素: 修改保存状态的方法

import React, {useState} from 'react';

export default function App() {
    const [state, setState] = useState(0);

    return (
        <div>
            <p>{state}</p>
            <button onClick={() => {
                setState(state + 1)
            }}>增加
            </button>
            <button onClick={() => {
                setState(state - 1)
            }}>减少
            </button>
        </div>
    )
}

在同一个函数式组件中, 是可以多次使用同名的 Hook 的, 当然除了可以多次使用同名的 Hook 之外呢，还可以保存我们复杂的状态内容如下：

import React, {useState} from 'react';

export default function App() {
    const [ageState, setAgeState] = useState(18);
    const [nameState, setNameState] = useState('BNTang');

    const [studentState, setStudentState] = useState({name: 'zs', age: 23});

    const [heroState, setHeroState] = useState([
        {id: 1, name: '鲁班'},
        {id: 2, name: '虞姬'},
        {id: 3, name: '黄忠'},
    ]);

    return (
        <div>
            <p>{ageState}</p>
            <button onClick={() => {
                setAgeState(ageState + 1)
            }}>增加
            </button>
            <button onClick={() => {
                setAgeState(ageState - 1)
            }}>减少
            </button>
            <hr/>
            <p>{nameState}</p>
            <button onClick={() => {
                setNameState('Jonathan_Lee')
            }}>修改
            </button>
            <hr/>
            <p>{studentState.name}</p>
            <p>{studentState.age}</p>
            <hr/>
            <ul>{
                heroState.map((hero) => {
                    return <li key={hero.id}>{hero.name}</li>
                })
            }</ul>
        </div>
    )
}

useState 注意点

• 和类组件中的 setState 一样, 如果不记得可参考：https://www.cnblogs.com/BNTang/articles/16157940.html 进行回顾

解决方案：

import React, {useState} from 'react';

export default function App() {
    const [ageState, setAgeState] = useState(18);
    const [nameState, setNameState] = useState('BNTang');
    const [studentState, setStudentState] = useState({name: 'zs', age: 23});
    const [heroState, setHeroState] = useState([
        {id: 1, name: '鲁班'},
        {id: 2, name: '虞姬'},
        {id: 3, name: '黄忠'},
    ]);

    function incrementAge() {
        setAgeState((preAgeState) => preAgeState + 10);
        setAgeState((preAgeState) => preAgeState + 10);
        setAgeState((preAgeState) => preAgeState + 10);
    }

    function changeName() {
        setStudentState({...studentState, name: 'Jonathan_Lee'});
    }

    return (
        <div>
            <p>{ageState}</p>
            <button onClick={() => {
                incrementAge()
            }}>增加incrementAge
            </button>
            <button onClick={() => {
                setAgeState(ageState - 1)
            }}>减少
            </button>
            <hr/>
            <p>{nameState}</p>
            <button onClick={() => {
                setNameState('Jonathan_Lee')
            }}>修改
            </button>
            <hr/>
            <p>{studentState.name}</p>
            <p>{studentState.age}</p>
            <button onClick={() => {
                changeName()
            }}>修改changeName
            </button>
            <hr/>
            <ul>{
                heroState.map((hero) => {
                    return <li key={hero.id}>{hero.name}</li>
                })
            }</ul>
        </div>
    )
}

然后如上代码还有一处就是修改引用类型的数据，博主编写的代码是将之前的引用对象拿到，然后在截取出来在重新设置需要更新的字段即可。