useState
语法
# 含义
useState是一个hook函数,允许向组件添加一个状态变量,当变量发生变化的时候重新渲染组件。
# 导入
import { useState } from 'react'
# 语法, 调用useState返回数组变量和修改变量的方法
const [count, setCount] = useState(0)
# 参数说明
0: 默认值
参数1 count:变量
参数2 setCount:修改变量的函数
修改变量时调用函数并传入新的值,直接修改count值不行,必须调用setCount函数
字典操作
const [form, setForm] = useState({name: 'xxx'})
setForm({
...form,
name: 'aaa'
})
# ...form 展开字典然
# 在下面写key和value,有的话就是修改没有就是增加
列表操作
const [form, setForm] = useState([1,3,4])
setForm({
...form,
5
})
# ...form 展开列表然
# 在下面写值就是增加
useRef
语法
# 含义
获得/操作DOM的钩子函数
# 创建ref对象,并于jsx绑定
const inputRef = useRef(null)
<input type='text' ref={inputRef} />
# 使用ref.current获取dom
inputRef.current
useEffect
语法
# 含义
用于由渲染本身引起的操作的钩子函数,比如发送ajax请求、更改DOM等等
# 语法
useEffect(() => {}, [])
# 参数说明
参数1: 回调函数,也称为副作用函数,防止要处理的操作
参数2:放置依赖项,决定回调函数的执行
不传参数:组件初始渲染和组件更新时执行
空数组:只在组件初始渲染时执行一次
特定依赖项:组件初始渲染和特定依赖项发生变化时执行
清除副作用
# 在组件卸载时,需要将useEffect里写的操作清除,在副作用函数内return一个回调函数
# 语法
useEffect(() => {
# 实现副作用操作的逻辑
return () => {
# 清除副作用的逻辑
}
}, [])
自定义hook函数
# 语法
1. 使用use开头的函数
2. 只能在组件中或者其他自定义hook函数中调用
3. 只能在组件的顶层调用, 不能在if、for、其他函数中调用
function useXxx () {
# 代码逻辑
return {
# 状态
# 方法
}
}