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

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

相关推荐
计算机魔术师10 分钟前
Meta突然杀进第一梯队：一个新模型，把AI推理成本打下来8倍
前端
IT_陈寒21 分钟前
Redis缓存雪崩把我坑惨了，这次长记性了
前端·人工智能·后端
风骏时光牛马32 分钟前
提示词工程：大模型效能挖掘与指令设计实战
前端
仓三34 分钟前
Chrome DevTools MCP 上手：让 Coding Agent 自己调试前端页面
前端·chrome devtools·mcp
计算机魔术师40 分钟前
扒完Google AI Agent挑战赛的前三名，我发现了一个共同点
前端
独立开发之道43 分钟前
【three.js教程】Three.js 运行时更新：矩阵、几何体、材质怎么改才不卡
javascript·矩阵·材质
不可能片场1 小时前
resources/app 为何能覆盖 app.asar
前端·electron
小婉1 小时前
我用 Next.js + React Flow 从零搭建了一个可视化 AI 工作流编排平台
前端·人工智能·node.js
skiyee1 小时前
🚀 用 17 行代码给 UniApp 加上全局登录拦截
前端·uni-app
默_笙2 小时前
🌃 HTTP 不认识你：JWT 登录鉴权的完整"酒店入住"指南
前端·javascript
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06ZCode 周末送额度活动开启：3 亿 Token 免费领取07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战