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

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

相关推荐
冰菓Neko几秒前
HTML 常用标签速查表
前端·html
gis收藏家25 分钟前
从稀疏数据（CSV）创建非常大的 GeoTIFF（和 WMS）
前端
程序视点38 分钟前
望言OCR 2025终极评测：免费版VS专业版全方位对比(含免费下载)
前端·后端·github
NUC_Dodamce1 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
五点六六六1 小时前
前端常见的性能指标采集
前端·性能优化·架构
吳所畏惧1 小时前
NVM踩坑实录：配置了npm的阿里云cdn之后，下载nodejs老版本（如：12.18.4）时，报404异常，下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
陈随易2 小时前
AI新技术VideoTutor，幼儿园操作难度，一句话生成讲解视频
前端·后端·程序员
Pedantic2 小时前
SwiftUI 按钮Button：完整教程
前端
前端拿破轮2 小时前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温2 小时前
DOM元素添加技巧全解析
前端
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03vue数据变化但页面不变04KGG转MP3工具|非KGM文件|解密音频05扣子开源本地部署教程 丨Coze智能体小白喂饭级指南06干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！07【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致08ChatGPT Agent 完全使用指南：2025年7月最新功能详解09《魔兽世界》提示lua警告的含义及解决方法10这次领先Cursor！体验了Trae 2.0 SOLO 模式，超酷！