React学习笔记：实用又好用的Hooks函数

最新推荐文章于 2024-06-11 15:11:02 发布

蚂蚁二娘

最新推荐文章于 2024-06-11 15:11:02 发布

阅读量681

点赞数 1

文章标签： react.js 学习前端

本文链接：https://blog.csdn.net/web2022050901/article/details/128643744

版权

本文介绍了React Hooks中的useState、useEffect、useRef和useContext四个核心函数，阐述了它们在函数式组件中的作用，以及如何模拟类组件的生命周期。文章通过实例展示了每个Hook的具体用法，帮助读者理解其工作原理和应用场景。

摘要由CSDN通过智能技术生成

React框架以前是采用Class类编程，在类编程中使用生命周期比较方便，但是随着迭代更新，官方开始推荐使用函数式编程，但是函数式编程就没有状态这一个概念，于是乎官方就定义了一系列钩子函数来弥补在这一缺陷，那今天我们就来学习几个实用又好用的Hooks函数。

本文是基于个人的学习分享，可能不是特别全面，本文使用的是18版本的react，使用脚手架搭建的项目。

Hooks

动机：

1.解决组件的逻辑复用。
2.解决一些class类中存在的一些问题。

定义： Hook顾名思义就是钩子的意思，在函数组件中将React的class类组件中状态以及生命周期等这些特性引入到函数组件中，这就是React的Hook函数。所以在类组件中就是不能使用hook函数。

useState

之前的函数式组件，也被称之为无状态组件，只能接受父组件传过来的props做展示，函数式组件中没有state状态也没有生命周期，而 state Hook 可以让函数式组件使用状态。

useState是React中的一个Hook函数，它是一个方法，调用的时候传入一个默认值，返回的是一个数组，其中第一项是默认状态（默认值会赋予状态），数组第二项是一个用于更新设置默认值都的函数。

因为写数组下标去获取比较麻烦，所以采用了ES6中数组的结构，直接获取到一个状态值和修改状态值的函数。

让我们用一个例子来体会一下，其中的妙用，首先需要从react中引入useState

import { useState } from 'react';

function Demo() {const [count,setCount] = useState(0);const [name,setName] = useState('寒月十九');return (<div><h3>{name}</h3><button onClick={() => { setName('十九') }}>change</button><h3>{count}</h3><button onClick={() => { setCount(count + 1) }}>add</button></div>);
}