本篇介绍了前端开发JS库React学习-React中的那些Hook的使用，通过具体的内容展现，希望对大家React的学习有所帮助。

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特，Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。

关于hooks的介绍可以参考我 另外一篇博客React的hooks是什么

 State Hook（useState）

useState可以为函数组件提供状态

当我们想要在函数组件中，使用组件状态时，就要使用 useState 这个Hook 了

useState的使用：

1. 导入useState

import {useState} from 'react'

2.调用 useState 函数，传入初始值，返回状态和修改状态的函数

function App = ()=>{

//调用useState传入初始值0 他返回的是一个数组 

const stateArr = useState(0)

//第一个元素是我们定义的初始状态

const state = stateArr [0] 

//第二个元素是修改状态的函数

const setState = stateArr [1]

}

我们一般用结构的方法直接定义：

function App = ()=>{

//调用useState传入初始值0 他返回的是一个数组 

//第一个元素是我们定义的初始状态,第二个元素是修改状态的函数

const [state,setState  ] = useState(0)

}

3.展示我们定义的状态 ，并通过他提供的方法修改它

把 state显示在页面上 点击按钮让他+1

import { useState } from 'react'

//  useState 是hook，hook是use开头的函数

const Count = () => {  

const [state,setState  ] = useState(0)

  return (

    <div>

      //展示状态值 

      <h1>useState Hook -> {state}</h1>

      //点击按钮，让状态值 +1

      <button onClick={() => setState(state + 1)}>+1</button>

    </div>

  )

}

补充：

useState唯一的参数就是初始 state。在上面的例子中，我们的计数器是从零开始的，所以初始 state 就是 0。 它可以是任意值（比如，数值、字符串等）

这个初始 state 参数只有在第一次渲染时会被用到。

我们每次使用setState更新状态都会让函数组件重新运行

可以在一个组件中多次使用useState

以前我们可能把它们叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力，所以我们更喜欢叫它”函数组件”

 Effect Hook（useEffect ）

Effect Hook 可以让我们在函数组件中执行副作用操作

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

副作用：

对于react组件来说，除了渲染UI之外的其他操作，都可以称之为副作用。

例如：数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等

执行时机：

render工作完成之后，执行Effect

如果定义了多个，则顺序执行

useEffect的基本使用：

1. 导入useEffect

import { useEffect } from 'react'

2.使用

useEffect(() => {

console.log('useEffect 1 执行了,可以做副作用')

})

useEffect(() => {

console.log('useEffect 2 执行了,可以做副作用')

})

useEffect的完整格式：

我们先了解useEffect里的其他参数

副作用函数的返回值

格式：

useEffect(() => {

  // 副作用函数的内容

  return 副作用函数的返回值

}, [])

副作用函数的返回值是可选的，可省略。也可以返回一个清理函数，用来清理副作用

useEffect(() => {

  // 副作用函数的内容

  return （）=>{ /* 做清理工作*/ } // 清理函数

}, [])

清理函数的执行时机：

清理函数会在组件卸载时以及下一次副作用函数调用之前执行

useEffect的两个参数：

参数1： 副作用函数。

参数2：执行副作用函数的依赖项：它决定了什么时机执行参数1（副作用函数）

情况1：不带第二个参数（基本使用就是这种写法）。

useEffect(() => {

console.log('useEffect 1 执行了,可以做副作用')

})

执行时机：挂载时执行一次 ，每次更新之后都要执行

情况2：带第二个参数，参数是空数组。

useEffect(() => {

  // 副作用函数的内容

}, [])

执行时机：只挂载时执行第一次

使用场景：

事件绑定

发送请求获取数据 等。

情况3：带第二个参数（数组格式），并指定了依赖项。

useEffect(() => {

  // 副作用函数的内容

}, [依赖项1,依赖项2,....])

执行时机：

挂载时执行一次

依赖项的值变化了，执行一次

这里的依赖项就是组件中定义的状态。

情况4：依赖项为空，没有具体的副作用函数，有副作用函数的清理函数

useEffect(() => {

  return () => {

  // 副作用函数的清理函数

}, [])

模拟componentWillUnMount

执行时机： 组件卸载时执行

还有其他几个使用频率稍低的Hook函数 我有时间加上

✅  扫码免费获取IT基础课程 · IT技术干货 · 答疑解惑 · 职业测评