Hooks 是什么
Hooks
:钩子、钓钩、钩住。 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
有了hooks 我们说的函数组件就有状态和生命周期了
注:Hooks只能在函数组件中使用
函数式组件的好处
-
函数本身比较简单,更好的胜任根据状态来渲染UI这件事
-
hooks让函数组件内部有了维护状态的能力
-
hooks带来了组件的逻辑复用能力
--------------------------------------------------------
认识第一个Hooks: useState
tips:所有hooks都是use开头
作用:为函数组件提供状态
1.导入
import React, { useState } from 'react'
2.使用
// useState 返回的结果: [初始值,修改状态的函数]
// 这里将它解构
// 这句话只会页面加载时执行一次
// 多次调用就是多个状态
const [count, setCount] = useState(0)
参数:状态初始值。比如,传入 0 表示该状态的初始值为 0
此处的状态可以是任意值(比如,数值、字符串等),而 class 组件中的 state 必须是对象
返回值:数组,包含两个值:1 状态值(count) 2 修改该状态的函数(setCount)
约定:修改状态的函数名称以 set 开头,后面跟上状态的名称
那来改下初始值
return (
<div>
<h1>count的为{count}</h1>
<button
onClick={() => {
setCount(count + 1)
}}>
点我加1
</button>
</div>
)
useState传参的两种格式
格式1:传入值
useState(0) useState('abc')
格式2:传入回调
useState(()=>{这里有一些计算, return 结果}))`
1. 回调函数的返回值就是状态的当前值
2. 回调函数只会触发一次
--------------------------------------------
setXXX的参数也可以是回调
比如 我多次调用之后, 值还是1, 那我想要叠加怎么办??
那就不能用下面这种写法了
<button
onClick={() => {
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
}}>
点我加1
</button>
换一种
<button
onClick={() => {
setCount((count) => count + 1)
setCount((count) => count + 1)
setCount((count) => count + 1)
}}>
点我加1
</button>
就点一次就变成了3
--------------------------
useState更新过程
函数组件使用 useState hook 后的执行过程,以及状态值的变化:
-
组件第一次渲染:
-
执行该函数中的代码逻辑
-
调用
useState(0)
将传入的参数作为状态初始值,即:0 -
渲染组件,此时,获取到的状态 count 值为: 0
-
用户点击按钮,调用 setCount(count + 1)
修改状态,因为状态发生改变,所以,该组件会重新渲染
-
组件第二次渲染:
-
再次执行该组件中的代码逻辑
-
再次调用
useState(0)
:-
此时 React 内部会拿到最新的状态值而非初始值
-
该案例中最新的状态值为 1
-
-
再次渲染组件,此时,获取到的状态 count 值为:1
-
注:状态更新,整个组件的逻辑重新运行一次;