Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

    • UI 框架

      • Angular

      • React

        • React Hooks 实现原理
        • React 组件销毁需要注意的异步更新问题
          • 问题描述
          • 解决方案
          • 拓展阅读
        • React项目结构规范
        • React Fiber 实现原理
        • React Fiber 本质
        • React「 Refs 转发 」初探
        • React之低版本chrome setState loading2次状态出现的bug
        • react学习
        • 使用 immer 修改复杂对象
        • input 原生控件,React 是如何实现受控输入的?
        • useEffect 如何处理 async
        • 用组件替换文本中emoji字符
        • 谈谈 React 组件设计原则
      • Solid

      • Svelte

      • Vue

      • 框架本质

    • 开发框架

    • 组件库

  • 工程能力

  • 应用基础

  • 专业领域

  • 业务场景

  • 大前端
  • 应用框架
  • UI 框架
  • React
gahing
2023-08-19
目录

React 组件销毁需要注意的异步更新问题笔记

# 问题描述

组件销毁,闭包内部的异步逻辑还会继续。存在什么问题?

  1. 状态不会正常更新,这个符合预期。原因是 React 内部做了处理,在销毁的组件中更新状态不会成功会出警告:Warning: Can't perform a React state update on an unmounted component
  2. 其他副作用会生效,可能影响页面状态。

如何解决这两个问题?

# 解决方案

包装一个 hook ,提供一个异步处理器,并在 unmount 状态下关闭这个处理器。

下面是一个简单的示例代码:

export function useFetch = (config, deps) => {
  const abortController = new AbortController()
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState()

  useEffect(() => {
    setLoading(true)
    fetch({
      ...config,
      signal: abortController.signal
    }).then(res => setResult(res))
      .finally(_ => setLoading(false))
  }, deps)

  useEffect(() => {
    return () => abortController.abort()
  }, [])

  return { result, loading }
}

const { loading, result } = useFetch({ url: 'xxx' }, [])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面是一个立即调用请求的 hook ,不一定好用,业务上一般是在特定时机下才发起请求。

生产环境下可以考虑使用 ahooks 的 useRequest (opens new window)

# 拓展阅读

  • React报错之无法在未挂载的组件上执行React状态更新 (opens new window)
  • React 查漏补缺 (opens new window)
编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
React Hooks 实现原理
React项目结构规范

← React Hooks 实现原理 React项目结构规范→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式