React-useState/useRef/useEffect/自定义hook

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 {
		# 状态
		# 方法
	}
}