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</button>

    );
    }

    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</button>

    );
    }

    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（记忆的） 值 ；

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

相关推荐
清幽竹客20 分钟前
vue-37（模拟依赖项进行隔离测试）
前端·vue.js
vvilkim20 分钟前
Nuxt.js 页面与布局系统深度解析：构建高效 Vue 应用的关键
前端·javascript·vue.js
滿24 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年24 分钟前
javascript的类，ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通：模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解：门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析：缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 （可拿去直接用）
前端·javascript·websocket·uni-app
要加油哦～6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
热门推荐
01手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Coze（扣子）智能体工作流：自动批量生成书单号视频，1分钟100个，书单号博主都在用！08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze 全方位入门剖析 - 免费打造自己的 AI 超级个体