常用React Hooks 大合集（一）

_聪明勇敢有力气

已于 2023-03-18 22:55:23 修改

阅读量888

点赞数

分类专栏： react18 文章标签： react.js javascript 前端

于 2023-03-18 22:44:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65402230/article/details/129642990

版权

react18 专栏收录该内容

14 篇文章

订阅专栏

React Hooks

我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势：

class组件可以定义自己的state，用来保存组件自己内部的状态；
- 函数式组件不可以，因为函数每次调用都会产生新的临时变量；
class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；
- 比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；
- 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；
- 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

类组件存在的问题

复杂组件变得难以理解：

我们在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂。但是随着业务的增多，我们的class组件会变得越来越复杂；
比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在componentWillUnmount中移除）；
而对于这样的class实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度；
难以理解的class：
学习ES6的class是学习React的一个障碍。
比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；
组件复用状态很难：
像redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
这些代码让我们不管是编写和设计上来说，都变得非常困难；

Hook

Hook的出现，可以解决上面提到的这些问题；
简单总结一下hooks：

它可以让我们在不编写class的情况下使用state以及其他的React特性；
但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；
Hook的使用场景：
Hook的出现基本可以代替所有使用class组件的地方；
Hooks完全向下兼容，可以渐进式的来使用它；
Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

useState

那么我们来研究一下核心的一段代码代表什么意思：
useState来自react，需要从react中导入，它是一个hook；

参数：初始化值，如果不设置为undefined；
返回值：数组，包含两个元素；
- 元素一：当前状态的值（第一调用为初始化值）；
- 元素二：设置状态值的函数；

React 使用 Object.is 比较算法来比较 state。

import { memo, useState } from "react";

function CounterHook(props) {
  const [counter, setCounter] = useState(0)
  console.log(name)

  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={e => setCounter(counter+1)}>+1</button>
      <button onClick={e => setCounter(counter-1)}>-1</button>
    </div>
  )
}
export default memo(CounterHook)

点击button按钮后，会完成两件事情：
- 调用setCount，设置一个新的值；
- 组件重新渲染，并且根据新的值返回DOM结构；

Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；
但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

State Hook的API就是 useState，我们在前面已经进行了学习：

useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。
- 一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
useState 接受唯一一个参数, 在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。
useState的返回值是一个数组，我们可以通过数组的解构，来完成赋值会非常方便。
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  FAQ：为什么叫 useState 而不叫 createState?
“create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。
在下一次重新渲染时，useState 返回给我们当前的 state。
**如果每次都创建新的变量，它就不是 “state”**了。
这也是 Hook 的名字总是以 use 开头的一个原因。
当然，我们也可以在一个组件中定义多个变量和复杂变量（数组、对象）

useEffect

目前我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
所以对于完成这些功能的Hook被称之为 Effect Hook；

useEffect的解析：

通过useEffect的Hook，可以告诉React需要在渲染后执行某些操作；
useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；
默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；

useEffect()是一个钩子函数，需要一个函数作为参数
这个作为参数的函数，将会在组件渲染完毕后执行
在开发中，可以将那些会产生副作用的代码编写到useEffect的回调函数中例如fetch触发刷新的方法调用在useEffect fetch逻辑在useCallback
这样就可以避免这些代码影响到组件的渲染

默认情况下，useEffect()中的函数，会在组件渲染完成后调用，
并且是每次渲染完成后都会调用
在useEffect()可以传递一个第二个参数，
第二个参数是一个数组，在数组中可以指定Effect的依赖项
指定后，只有当依赖发生变化时，Effect才会被触发
通常会将Effect中使用的所有的局部变量都设置为依赖项
这样一来可以确保这些值发生变化时，会触发Effect的执行
像setState()是由钩子函数useState()生成的
useState()会确保组件的每次渲染都会获取到相同setState()对象
所以setState()方法可以不设置到依赖中
如果依赖项设置了一个空数组，则意味Effect只会在组件初始化时触发一次

需要清除Effect

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：

比如事件总线或Redux中手动调用subscribe；
都需要在componentWillUnmount有对应的取消订阅；

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
为什么要在 effect 中返回一个函数？

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
如此可以将添加和移除订阅的逻辑放在一起；
它们都属于 effect 的一部分；
React 何时清除 effect？
React 会在组件更新和卸载的时候执行清除操作；
正如effect 在每次渲染的时候都会执行；

总结：在Effect的回调函数中，可以指定一个函数作为返回值
这个函数可以称其为清理函数，它会在下次Effect执行前调用
可以在这个函数中，做一些工作来清除上次Effect执行所带来的的影响

使用多个Effect

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题：

比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中；
使用Effect Hook，我们可以将它们分离到不同的useEffect中：

import React, { memo, useEffect } from 'react'
import { useState } from 'react'

const App = memo(() => {
  const [count, setCount] = useState(0)

  // 负责告知react, 在执行完当前组件渲染之后要执行的副作用代码
  useEffect(() => {
    // 1.修改document的title(1行)
    console.log("修改title")
  })

  // 一个函数式组件中, 可以存在多个useEffect
  useEffect(() => {
    console.log("监听redux中的数据")
    return () => {
      // 取消redux中数据的监听
    }
  })

  useEffect(() => {
    console.log("监听eventBus的事件")
    return () => {
      // 取消eventBus中的事件监听
    }
  })

  return (
    <div>
      <button onClick={e => setCount(count+1)}>+1({count})</button>
    </div>
  )
})

export default App

Hook 允许我们按照代码的用途分离它们，而不是像生命周期函数那样：

React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

Effect性能优化

默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：

某些代码我们只是希望执行一次即可，类似于componentDidMount和componentWillUnmount中完成的事情；（比如网
络请求、订阅和取消订阅）；
另外，多次执行也会导致一定的性能问题；
我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢？
useEffect实际上有两个参数：
参数一：执行的回调函数；
参数二：该useEffect在哪些state发生变化时，才重新执行；（受哪些元素的影响就写哪些元素）

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []：

那么这里的Effect的参数回调函数A对应的就是componentDidMount返回回调函数B对应的就是componentWillUnmount生命周期函数了；

import React, { memo, useEffect } from 'react'
import { useState } from 'react'

const App = memo(() => {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("Hello World")

  useEffect(() => {
    console.log("修改title:", count)
  }, [count])

  useEffect(() => {
    console.log("监听redux中的数据")
    return () => {}
  }, [])

  useEffect(() => {
    console.log("监听eventBus的事件")
    return () => {}
  }, [])

  useEffect(() => {
    console.log("发送网络请求, 从服务器获取数据")
    return () => {
      console.log("会在组件被卸载时, 才会执行一次")
    }
  }, [])

  return (
    <div>
      <button onClick={e => setCount(count+1)}>+1({count})</button>
      <button onClick={e => setMessage("你好啊")}>修改message({message})</button>
    </div>
  )
})

export default App

useContext

在之前的开发中，我们要在组件中使用共享的Context有两种方式：

类组件可以通过类名.contextType = MyContext方式，在类中获取context；
多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；
但是多个Context共享时的方式会存在大量的嵌套：
Context Hook允许我们通过Hook来直接获取某个Context的值；
注意事项：
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重新渲染，并使用最新传递给 MyContext provider 的
context value 值。

import React, { memo, useContext } from 'react'
import { UserContext, ThemeContext } from "./context"

const App = memo(() => {
  // 使用Context
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <h2>User: {user.name}-{user.level}</h2>
      <h2 style={{color: theme.color, fontSize: theme.size}}>Theme</h2>
    </div>
  )
})

export default App

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { UserContext, TokenContext } from "./context"
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <UserContext.Provider value={{name: "kobe", level: 99}}>
        <App />
  </UserContext.Provider>
);

useReducer

useReducer仅仅是useState的一种替代方案：

在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
或者这次修改的state需要依赖之前的state时，也可以使用；

import React, { memo, useReducer } from 'react'
function reducer(state, action) {
  switch(action.type) {
    case "increment":
      return { ...state, counter: state.counter + 1 }
    case "decrement":
      return { ...state, counter: state.counter - 1 }
    case "add_number":
      return { ...state, counter: state.counter + action.num }
    case "sub_number":
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}

// useReducer+Context => redux

const App = memo(() => {

  const [state, dispatch] = useReducer(reducer, { counter: 0, friends: [], user: {} })

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
      <button onClick={e => dispatch({type: "add_number", num: 5})}>+5</button>
      <button onClick={e => dispatch({type: "sub_number", num: 5})}>-5</button>
      <button onClick={e => dispatch({type: "add_number", num: 100})}>+100</button>
    </div>
  )
})

export default App

reducer : 整合函数

对于我们当前state的所有操作都应该在该函数中定义
该函数的返回值，会成为state的新值
reducer在执行时，会收到两个参数：
- state 当前最新的state
- action 它需要一个对象
  - 在对象中会存储dispatch所发送的指令
initialArg : state的初始值，作用和useState()中的值是一样
返回值：
数组：
第一个参数，state 用来获取state的值
第二个参数，state 修改的派发器
- 通过派发器可以发送操作state的命令
- 具体的修改行为将会由另外一个函数(reducer)执行

import React, {useReducer, useState} from 'react';


// 为了避免reducer会重复创建，通常reducer会定义到组件的外部
const countReducer = (state, action) => {
    switch (action.type) {
        case 'ADD':
            return state + 1;
        case 'SUB':
            return state - 1;
        default:
            return state;
    }
};

const App = () => {
        const [count, countDispatch] = useReducer(countReducer, 1);
        const addHandler = () => {
            // 增加count的值
            countDispatch({type: 'ADD'});
        };

        const subHandler = () => {
            // 增加count的值
            countDispatch({type: 'SUB'});
        };

        return (
            <div style={{fontSize: 30, width: 200, height: 200, margin: '100px auto', textAlign: 'center'}}>
                <button onClick={subHandler}>减少</button>
                {count}
                <button onClick={addHandler}>增加</button>

            </div>
        );
    }
;

export default App;

useCallback

useCallback实际的目的是为了进行性能的优化。
如何进行性能的优化

useCallback会返回一个函数的 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

通常使用useCallback的目的是不希望子组件进行多次渲染，并不是为了函数进行缓存；

当需要将一个函数传递给子组件时, 最好使用useCallback进行优化, 将优化之后的函数, 传递给子组件

参数：

回调函数
依赖数组

当依赖数组中的变量发生变化时，回调函数才会重新创建
如果不指定依赖数组，回调函数每次都会重新创建
一定要将回调函数中使用到的所有变量都设置到依赖数组中
除了（setState）

useCallback 创建的回调函数不会总在组件重新渲染时重新创建

import React, {useCallback, useState} from 'react';
import A from "./components/A";

const App = () => {
    console.log('App渲染');
    const [count, setCount] = useState(1);

    const [num, setNum] = useState(1);
    const clickHandler = useCallback(() => {
        setCount(prevState => prevState + num);
        setNum(prevState => num + 1);
    }, [num]);

    return (
        <div>
            <h2>App -- {count}</h2>
            <button onClick={clickHandler}>增加</button>
            <A onAdd={clickHandler}/>
        </div>
    );
};

export default App;

useMemo

useMemo实际的目的也是为了进行性能的优化。
如何进行性能的优化

useMemo返回的也是一个 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

总结：useMemo和useCallback这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

import React, { memo, useCallback } from 'react'
import { useMemo, useState } from 'react'


const HelloWorld = memo(function(props) {
  console.log("HelloWorld被渲染~")
  return <h2>Hello World</h2>
})


function calcNumTotal(num) {
  let total = 0
  for (let i = 1; i <= num; i++) {
    total += i
  }
  return total
}

const App = memo(() => {
  const [count, setCount] = useState(0)
  // useMemo和useCallback的对比
  function fn() {}
  // const increment = useCallback(fn, [])
  // const increment2 = useMemo(() => fn, [])

  const info = useMemo(() => ({name: "why", age: 18}), [])
  return (
    <div>
      <h2>计算结果: {result}</h2>
      <h2>计数器: {count}</h2>
      <button onClick={e => setCount(count+1)}>+1</button>

      <HelloWorld result={result} info={info} />
    </div>
  )
})

export default App