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>);
}