乐趣区

关于react-hooks:React-Hook介绍和应用

介绍:

官网上,给 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

退出移动版