[JavaScript知识库]什么是hooks?

Hooks 是什么

? ?Hooks：钩子、钓钩、钩住。 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

有了hooks 我们说的函数组件就有状态和生命周期了

注:Hooks只能在函数组件中使用

函数式组件的好处

1. 函数本身比较简单，更好的胜任根据状态来渲染UI这件事

2. hooks让函数组件内部有了维护状态的能力

3. hooks带来了组件的逻辑复用能力

--------------------------------------------------------

认识第一个Hooks: useState

tips:所有hooks都是use开头

作用:为函数组件提供状态

1.导入

import React, { useState } from 'react'

2.使用

  // useState 返回的结果: [初始值,修改状态的函数]
  // 这里将它解构
  // 这句话只会页面加载时执行一次
  // 多次调用就是多个状态
  const [count, setCount] = useState(0)

参数：状态初始值。比如，传入 0 表示该状态的初始值为 0

此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象

返回值：数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）

约定：修改状态的函数名称以 set 开头，后面跟上状态的名称

那来改下初始值

 return (
    <div>
      <h1>count的为{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1)
        }}>
        点我加1
      </button>
    </div>
  )

?useState传参的两种格式

格式1：传入值

?	 useState(0) useState('abc')

格式2：传入回调

?	useState(()=>{这里有一些计算， return 结果}))`

1.?回调函数的返回值就是状态的当前值

2.?回调函数只会触发一次

--------------------------------------------

setXXX的参数也可以是回调

比如 我多次调用之后, 值还是1, 那我想要叠加怎么办???

那就不能用下面这种写法了

<button
        onClick={() => {
          setCount(count + 1)
          setCount(count + 1)
          setCount(count + 1)
        }}>
        点我加1
      </button>

换一种

<button
        onClick={() => {
          setCount((count) => count + 1)
          setCount((count) => count + 1)
          setCount((count) => count + 1)
        }}>
        点我加1
      </button>

?就点一次就变成了3

--------------------------

useState更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化：

• 组件第一次渲染：

  1. 执行该函数中的代码逻辑

  2. 调用 useState(0) 将传入的参数作为状态初始值，即：0

  3. 渲染组件，此时，获取到的状态 count 值为： 0

用户点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染

• 组件第二次渲染：

  1. 再次执行该组件中的代码逻辑

  2. 再次调用 useState(0)：

     1. 此时 React 内部会拿到最新的状态值而非初始值

     2. 该案例中最新的状态值为 1

  3. 再次渲染组件，此时，获取到的状态 count 值为：1

注:状态更新，整个组件的逻辑重新运行一次；