React---Hooks深入

菥菥爱嘻嘻2025-06-13 17:24

16.1 useEffect

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；

  • 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；

  • 所以对于完成这些功能的Hook被称之为 Effect Hook；

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

    function UseEffectDemo() {
    const [counter, setCounter] = useState(0);
    useEffect(() => {
    document.title = "Counter" + counter;
    });
    return (


    Counter: {counter}


    <button onClick={() => setCounter(counter + 1)}>Increment

    );
    }

    export default UseEffectDemo;

useEffect的清除：

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

  • 比如我们之前的事件总线或Redux中手动调用subscribe；
  • 都需要在componentWillUnmount有对应的取消订阅；
  • Effect Hook通过什么方式来模拟componentWillUnmount呢？

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：

为什么要在 effect 中返回一个函数？

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；

  • 如此可以将添加和移除订阅的逻辑放在一起；
  • 它们都属于 effect 的一部分；

React 何时清除 effect？

  • React 会在组件更新和卸载的时候执行清除操作；
  • 正如之前学到的，effect 在每次渲染的时候都会执行；

useEffect实际上有两个参数：

  • 参数一：执行的回调函数；
  • 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

16.2 useContext

Context Hook允许我们通过Hook来直接获取某个Context的值；

App.js定义共享

复制代码 
export const userContext = createContext();
export const ThemContext = createContext();

App.js还是需要包裹

复制代码 
function App() {
  return (
    <div className="App">
      {/* <UseCounter />
      <MoreState /> */}
      {/* <UseEffectDemo /> */}
      <userContext.Provider value={{ name: "里斯" }}>
        <ThemContext.Provider value={{ theme: "dark" }}>
          <UserContextDemo />
        </ThemContext.Provider>
      </userContext.Provider>
      
    </div>
  );
}

使用(超简单)

复制代码 
import React, { useContext } from 'react'
import { userContext } from './App'

export default function UserContextDemo() {
  const { name } = useContext(userContext);
  return <div>用户名：{name}</div>
}

16.3 useReducer

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

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

使用计数来举个例子：

复制代码 
import React, { PureComponent, useReducer } from 'react'

// 定义reducer函数，接收state和action，根据action.type返回新的state
function reducer(state, action) {
    switch (action.type) {
        case 'INCRESE': // 增加
            return { count: state.count + 1 };
        case 'DECRESE': // 减少
            return { count: state.count - 1 };
        default:
            throw new Error(); // 未知action抛出错误
    }
}

export default function UseReducer() {
    // 定义初始状态
    const initialState = {
        count: 0
    }
    // useReducer返回当前state和dispatch方法
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            {/* 显示当前count */}
            <h2>number{state.count}</h2>
            {/* 点击按钮派发INCRESE和DECRESE action */}
            <button onClick={() => dispatch({ type: 'INCRESE' })}> + 1</button>
            <button onClick={() => dispatch({ type: 'DECRESE' })}> - 1</button>
        </div>
    )
}

16.4 useCallBack

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

如何进行性能的优化呢？

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

16.5 useMemo

useMemo返回的也是一个 memoized（记忆的） 值 ；

在依赖不变的情况下，多次定义的时候，返回的值是相同的；

16.1 useEffect

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；

  • 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；

  • 所以对于完成这些功能的Hook被称之为 Effect Hook；

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

    function UseEffectDemo() {
    const [counter, setCounter] = useState(0);
    useEffect(() => {
    document.title = "Counter" + counter;
    });
    return (


    Counter: {counter}


    <button onClick={() => setCounter(counter + 1)}>Increment

    );
    }

    export default UseEffectDemo;

useEffect的清除：

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

  • 比如我们之前的事件总线或Redux中手动调用subscribe；
  • 都需要在componentWillUnmount有对应的取消订阅；
  • Effect Hook通过什么方式来模拟componentWillUnmount呢？

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：

为什么要在 effect 中返回一个函数？

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；

  • 如此可以将添加和移除订阅的逻辑放在一起；
  • 它们都属于 effect 的一部分；

React 何时清除 effect？

  • React 会在组件更新和卸载的时候执行清除操作；
  • 正如之前学到的，effect 在每次渲染的时候都会执行；

useEffect实际上有两个参数：

  • 参数一：执行的回调函数；
  • 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

16.2 useContext

Context Hook允许我们通过Hook来直接获取某个Context的值；

App.js定义共享

复制代码 
export const userContext = createContext();
export const ThemContext = createContext();

App.js还是需要包裹

复制代码 
function App() {
  return (
    <div className="App">
      {/* <UseCounter />
      <MoreState /> */}
      {/* <UseEffectDemo /> */}
      <userContext.Provider value={{ name: "里斯" }}>
        <ThemContext.Provider value={{ theme: "dark" }}>
          <UserContextDemo />
        </ThemContext.Provider>
      </userContext.Provider>
      
    </div>
  );
}

使用(超简单)

复制代码 
import React, { useContext } from 'react'
import { userContext } from './App'

export default function UserContextDemo() {
  const { name } = useContext(userContext);
  return <div>用户名：{name}</div>
}

16.3 useReducer

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

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

使用计数来举个例子：

复制代码 
import React, { PureComponent, useReducer } from 'react'

// 定义reducer函数，接收state和action，根据action.type返回新的state
function reducer(state, action) {
    switch (action.type) {
        case 'INCRESE': // 增加
            return { count: state.count + 1 };
        case 'DECRESE': // 减少
            return { count: state.count - 1 };
        default:
            throw new Error(); // 未知action抛出错误
    }
}

export default function UseReducer() {
    // 定义初始状态
    const initialState = {
        count: 0
    }
    // useReducer返回当前state和dispatch方法
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            {/* 显示当前count */}
            <h2>number{state.count}</h2>
            {/* 点击按钮派发INCRESE和DECRESE action */}
            <button onClick={() => dispatch({ type: 'INCRESE' })}> + 1</button>
            <button onClick={() => dispatch({ type: 'DECRESE' })}> - 1</button>
        </div>
    )
}

16.4 useCallBack

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

如何进行性能的优化呢？

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

16.5 useMemo

useMemo返回的也是一个 memoized（记忆的） 值 ；

在依赖不变的情况下，多次定义的时候，返回的值是相同的；

相关推荐
shmily麻瓜小菜鸡4 分钟前
前端“伪防盗链”方案
前端·javascript·vue.js·bootstrap·echarts
mayaairi4 分钟前
JS数组完全指南（含十大操作详解）
开发语言·前端·javascript
IT_陈寒25 分钟前
Python的线程池把我CPU跑满了，原来少传了个参数
前端·人工智能·后端
喜欢的名字被抢了33 分钟前
写-Chrome-扩展时踩过的那些-MV3-的坑
前端·chrome
网安老伯43 分钟前
网络安全基础要点知识介绍（非常详细），零基础入门到精通，看这一篇就够了
运维·前端·网络协议·web安全·网络安全·职场和发展
wuqingshun3141591 小时前
springBoot是如何通过main方法启动web项目的？
前端·spring boot·后端
xxwl5851 小时前
HTML 小总结：从骨架到枝叶，系统掌握网页结构
前端·html
●VON1 小时前
鸿蒙 PC Markdown 编辑器 Bridge 协议：原生外壳与 Web 内核的状态同步
前端·华为·编辑器·harmonyos·鸿蒙
MrDJun1 小时前
分享一款免费实用的网页变动监控工具：PageWatch.tech
前端·javascript·vue.js
米码收割机1 小时前
【web】邻里悦站—社区便民服务平【独一无二】（源码+说明文档）
前端
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04AI科技热点日报 | 2026年07月01日05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新102026 年 AI 大模型 & AI 编程工具实战全总结