介绍:
官网上,给 Hook 的定义是:一些能够让你在函数组件里“钩入”React state 及生命周期等个性的函数。Hook 不能在 class 中应用,然而,能够在新组件中应用 Hook。
Hook 的应用规定:
1,只能在函数最外层调用 Hook,不要在循环,条件判断 或 子函数 中调用 Hook
2,只能在两个中央调用 Hook,React 的函数组件 和 自定义 Hook 中
自定义 Hook:
如果函数的名字以“use”结尾并调用其余 Hook,咱们就说这是一个自定义 Hook
应用场景:组件之间重用一些状态逻辑。
特点:自定义 Hook 的每次调用都有一个齐全独立的 state —— 因而你能够在单个组件中屡次调用同一个自定义 Hook。
内置的几个 Hook
useState
入参:定义的 state 中变量的初始值
返回值:定义的 state 中变量名; 批改此变量的办法, 更新此变量时,总是替换它,而不是合并它(和 this.setState()
区别的合并不同,留神区别)
例 1:
// 申明一个 count 的 state 变量,它的初始值是 0,并且通过 setCount 办法更新 count
const [count, setCount] = useState(0);
例 2:
// 可在一个 react 组件中定义多个 useState
const MultiThing = () => {const [age, setAge] = useState(30)
const [] = useState('apple')
// error 变量是 Error 或者 null 类型,并且初始值是 null
const [error, setError] = useState<Error | null>(null);
}
接下来几天,会持续介绍其余 Hook 和我的项目中用到的自定义 Hook