【React】React全家桶（五）React Hooks

原创

已于 2024-07-17 09:43:31 修改 · 4.5k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端框架 #javascript #前端

于 2022-08-09 11:28:23 首次发布

本文全面介绍了React Hooks的概念、优势、应用场景及注意事项，并详细讲解了useState、useReducer等Hooks API的使用方法，帮助开发者更好地理解和运用Hooks。

1 Hooks简介

1.1 什么是Hooks？

Hooks 直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。一般指：系统运行到某一时期时，会调用被注册到该时机的回调函数。比如： windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
在React中，Hooks 是 React 16.8 新增的特性，是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的特殊JS函数，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。简言之：Hooks是一系列方法，提供了在函数式组件中完成开发工作的能力。
之前使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有 , Hooks 的出现可以让你在函数组件直接使用state等功能
React Hooks官方文档

1.2 Hooks的优势

hooks 之间的状态是独立的，有自己独立的上下文，不会出现混淆状态的情况
让函数组件有了状态管理
解决了组件树不直观、类组件难维护、逻辑不易复用的问题
避免函数重复执行的副作用

1.3 Hooks使用场景

利用 hooks 取代生命周期函数
让函数组件有了状态
组件辅助函数
处理发送请求
存取数据做好性能优化

1.4 Hooks使用注意事项

假设任何以 use 开头并紧跟着一个大写字母的函数就是一个 Hook
只能在函数内部的最外层调用 Hook，不要在循环、条件判断或者子函数中调用
只能在 React 的函数组件中调用 Hook，不要在普通JS函数中调用

2 Hooks API

2.1 数据驱动更新型Hooks

useState

useState（数据驱动更新）：给函数组件添加state状态，并进行状态的读写操作，函数组件通过 useState 可以让组件重新渲染，更新视图。

useState语法：

import React,{
   
    useState } from 'react'
const [xxx, setXxx] = useState(initState)

参数initState：第一种情况是非函数，将作为 xxx 初始化的值。第二种情况是函数，函数的返回值作为 useState 初始化的值。

返回值[xxx, setXxx]：包含2个元素的数组，xxx是当前状态值，setXxx是修改状态值的函数

xxx：提供给 UI ，作为渲染视图的数据源
setXxx：改变 xxx 的异步函数，推动函数组件渲染的渲染函数，要在下次重新渲染才能获取新值，下面是setXxx的两种写法：
- setXxx(newValue): 参数为非函数值, 直接指定新的状态值来覆盖原来的状态值
- setXxx((value) => {newValue}): 参数为函数, 接收原来的状态值, 返回新的状态值进行覆盖，若newValue中没有使用value， value就可以不写

useState基础用法：

import React, {
   
    useState } from 'react'
const Demo = () => {
   
   
  let [number, setNumber] = useState(0)
  console.log(number, 'number')/* 这里的number能够即时更新的，这里是在重新渲染后调用的  */
  return (
    <div>
      <span>{
   
   number}</span>
      <button
        type="primary"
        onClick={
   
   () => {
   
   
          setNumber(number + 1)
          console.log(number,'number-=') /* 这里number不能够即时更新的，setNumber是异步更新  */
        }}
      >
        +1按钮
      </button>
    </div>
  )
}

在这里插入图片描述

注：

在函数组件一次执行上下文中，state 的值是固定不变的，当触发setXxx在当前执行上下文中获取不到最新的 state,，只有在下一次组件渲染中才能获取到（setXxx是异步函数）
如果两次setXxx 传入相同的 state 值，那么组件就不会更新

补充：方括号的作用

[ ]语法叫数组解构，它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit是返回的第二个值

  const [fruit, setFruit] = useState('banana');
  //等价于
  var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
  var fruit = fruitStateVariable[0]; // 数组里的第一个值
  var setFruit = fruitStateVariable[1]; // 数组里的第二个值

useReducer

useReducer（订阅状态，更新视图）是useState的替代方案，对于复杂的state操作逻辑，嵌套的state的对象，或者下一个 state 依赖于之前的 state 等，推荐使用useReducer。

useReducer语法：

const [xxx, setXxx] = useReducer(reducer, initState);

参数reducer：类似于 redux 中的 reducer 函数，(state, action) => newState，接收当前应用的state和触发的动作action，计算并返回最新的state ，如果返回的 state 和之前的 state ，内存指向相同，那么组件将不会更新。

参数initState：第一种情况是非函数，将作为state初始化的值。第二种情况是函数，函数的返回值作为 useReducer 初始化的值。

返回值[xxx, setXxx]：包含2个元素的数组，xxx是当前状态值，setXxx是修改状态值的函数

xxx：提供给 UI ，作为渲染视图的数据源
setXxx：改变 xxx 的异步函数，用来触发reducer函数，计算对应的state，其余和useState类似

useReducer基础用法：

//demo.js
import React, {
   
    useReducer } from 'react'
import MyChildren from './children'
const Demo = () => {
   
   
  /* number为更新后的state值,  dispatchNumbner 为当前的派发函数 */
  const [number, dispatchNumber] = useReducer((state, action) => {
   
   
    const {
   
    payload, name