前言

我的Bilibili频道：香芋派Taro
我的博客：taropie0224.github.io
我的公众号：香芋派的烘焙坊
我的音频技术交流群：1136403177
我的个人微信：JazzyTaroPie

什么是Hooks？

React Hooks的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。
以下是React为我们提供的默认的四种最常用的钩子:

  • useState()
  • userContext()
  • userReducer()
  • useEffect()

useState(): 状态勾子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}
export default AddCount

通过上面的代码，我们实现了一个功能完全一样的计数器，代码看起来更加的轻便简洁，没有了继承，没有了渲染逻辑，没有了生命周期等。这就是hooks存在的意义。
在useState()中，它接受状态的初始值作为参数，即上例中计数的初始值，它返回一个数组，其中数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState。该函数的命名，我们约定为set前缀加状态的变量名。