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

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

相关推荐
知了学历孙老师1 小时前
小自考的校考和统考，出题方和难度差在哪
java·大数据·前端
ShineWinsu3 小时前
对于JavaScript：操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说4 小时前
JSON 格式正确，数据就可靠吗？我用一份自编配置检查类型与空值
java·前端·json
志尊宝5 小时前
AI原生前端开发（009）：AI辅助性能分析与优化建议
人工智能·react.js·ai-native
程序员老赵6 小时前
Docker 部署青龙面板：轻松搭建定时任务管理平台
前端·docker·开源
Swot6 小时前
Asciidoctor 公式数字下标错位问题：原因分析与解决方案
前端
Swot6 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI6 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测：代码渲染知识视频的选栈方法（附开源技能）
前端·人工智能·aigc
修炼的dance6 小时前
浏览器里导出H.265，8.5秒和55.5秒差在硬件
前端
补码缩写6 小时前
WebCodecs选编码器，探测之后还要验解码和播放
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会07苹果iPA游戏软件资源下载网站08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）10蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接