React-Hooks开篇和React-Hooks-useState

原创

杨不易呀

发布于 2023-10-01 08:20:29

1660

发布于 2023-10-01 08:20:29

文章被收录于专栏：杨不易呀

Hook 概述

Hook 是 React 16.8 的新增特性
它可以让函数式组件拥有类组件的特性

为什么需要 Hook

在 Hook 出现之前, 如果我们想在组件中保存自己的状态, 如果我们想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件。

但是类组件的学习成本是比较高的, 你必须懂得 ES6 的 class, 你必须懂得箭头函数
但是在类组件的同一个生命周期方法中, 我们可能会编写很多不同的业务逻辑代码
这样就导致了大量不同的业务逻辑代码混杂到一个方法中, 导致代码变得很难以维护(诸如: 在组件被挂载的生命周期中, 可能需要注册监听, 可能需要发送网络请求等)
但是在类组件中共享数据是非常繁琐的, 需要借助 Context 或者 Redux 等

所以当应用程序变得复杂时, 类组件就会变得非常复杂, 非常难以维护，所以 Hook 就是为了解决以上问题而生的。

使用 Hook

Hook 的使用我们无需额外安装任何第三方库, 因为它就是 React 的一部分
Hook 只能在函数组件中使用, 不能在类组件，或者函数组件之外的地方使用
Hook 只能在函数最外层调用, 不要在循环、条件判断或者子函数中调用在这些地方是使用不了 Hook 的

官方文档地址：https://react.docschina.org/docs/hooks-intro.html

function Home() {
    // 只能在函数体的最外层使用
    // 只能在这个地方使用Hook
    
    if () {
        // 不能使用Hook
    }
    while () {
        // 不能使用Hook
    }
    for () {
        // 不能使用Hook
    }
    switch () {
        // 不能使用Hook
    }
    function demo() {
        // 不能使用Hook
    }
}

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('yangbuyiya');

    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/yangbuyiya/articles/16157940.html 进行回顾

解决方案：

import React, {useState} from 'react';

export default function App() {
    const [ageState, setAgeState] = useState(18);
    const [nameState, setNameState] = useState('yangbuyiya');
    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>
    )
}

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

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度