react性能优化之willunmount 销毁setTimeout，样式不要用行内式

于 2024-02-01 13:54:20 发布
阅读量412 收藏 7
点赞数 11
文章标签： react.js 前端 javascript ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29608475/article/details/135976767
版权
文章讨论了在React中处理异步任务时，如何在componentWillUnmount和componentDidMount生命周期方法中清理定时器，以避免因频繁渲染导致资源占用。同时，建议避免直接使用style，转而使用className以提高代码效率。
摘要由CSDN通过智能技术生成

react组件对于一些异步任务的话，要及时清理，否则频繁渲染的话会造成异步任务持续增多，不会释放
解决方案
1、在componentWillUnmount时clearTimout() clearIntever()
2、在componentDidMount是clearTimout() clearIntever()之后再setTimeout() setIntever()

tips: promise无法清除掉

此外，style={{}}尽量不要使用，用className来代替

作者：杨龙飞

原文地址：https://segmentfault.com/a/1190000022528728

喜欢 0
计算智能
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React之setState调用unmount组件报警告
hahahhahahahha123456的博客
11-09 825
最近公司比较忙,所以更新进度比较慢,一是因为要梳理以前的代码,二是因为赶进度!!! 这个问题也是机缘巧合碰到了,正赶上这周公司网络无缘无故抽风(很慢),然后那天在调试代码的时候忽然发现浏览器报了一个这样的Warning: warn.png   其实从字面上也大概可以了解个大概,是由于setState只能更新挂载完成的组件或者正在挂载的组件,那么定位这个BUG的第一步当然是先了解组件的生命...
如何理解react componentWillUnmount事件？
weixin_30555753的博客
12-15 4604
一直报这个错，地图加载的周期 exportdefaultclassAextendsReact.Component{constructor(props){super(props);this.scroll1=this.scroll1.bind(this)}componentDidMount(){ 　　stor...
React componentWillUnmount 替换 this.IsMounted()
CrazBarry的博客
07-20 1209
var UserGist = React.createClass({ getInitialState: function(){ return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { $.get(this.props.source, function(result){ var las
React 基础
m0_56516186的博客
03-28 67
补充：react组件什么时候触发unmounting阶段（被销毁的时候）react16 新生命周期。
React琐碎
weixin_30682415的博客
09-07 963
1 dangerouslySetInnerHTML 使用此属性的原因是得到一个安全的数据,生成一个仅包含唯一key——__html的对象,表明这段内容会被当成text/taint使用,它的使用方式是这样的: <div dangerouslySetInnerHTML={{this.props.xx}} /> 代码中写成<div />的形式,一是为了防止出...
react-react面试题之性能优化的手段.zip
最新发布
03-20
这份资料“react-react面试题之性能优化的手段”可能包含了关于如何提升React应用性能的各种策略和技巧。以下是一些可能涵盖的知识点： 1. **虚拟DOM（Virtual DOM）**：React通过虚拟DOM技术减少不必要的DOM操作，...
React性能优化系列之减少props改变的实现方法
12-08
React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU — shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子...
浅谈React组件之性能优化
11-26
高德纳: “我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。” 不要将性能优化的精力浪费在对整体性能提高不大的代码上，而对性能有关键...
浅谈react性能优化的方法
10-18
主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React组件生命周期
weixin_44241655的博客
05-20 283
组件的三个生命周期状态 1.初始化阶段*Mount 挂在虚拟DOM元素 由root.render()触发----初次创建对象加载与渲染 (1)construstor（） 内存有这个对象 (2)componentWillMount()将要被挂在 (3)render() 解析 转真实DOM渲染 这个阶段最常用的钩子函数constructor() 为对象赋值 componentDidMount()初始化操作，开启计时器发送网络请求... 2.更新阶段*Update 更新元素被重新渲染 由组件内部t
React生命周期
Joey_Tribiani的博客
02-23 196
React的生命周期分为3部分： 1、挂载阶段（mounting） 2、更新阶段（updating） 3、卸载阶段（unmounting）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpLDiUKn-1582467524362)(C:\Users\joey\AppData\Roaming\Typora\typora-user-images\image-202002...
解决React卸载组件发生的问题(root.unmount())
zyq的博客
05-11 1127
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
pb调用键盘钩子的例子_轻松学会 React 钩子：以 useEffect() 为例
weixin_39733821的博客
11-30 255
五年多前，我写过 React 系列教程[1]。不用说，内容已经有些过时了。我本来不想碰它们了，觉得框架一直在升级，教程写出来就会过时。但是，最近我逐渐体会到 React 钩子(hooks)非常好用，重新认识了 React 这个框架，觉得应该补上关于钩子的部分。下面就来谈谈，怎样正确理解钩子，并且深入剖析最重要的钩子之一的useEffect。内容会尽量通俗，让不熟悉 React 的朋友也能看懂。欢迎...
React-Hooks实现 componentWillUnmount使用 useEffect的第二个参数和return
热门推荐
研究生在读，分享学习日常。（零基础学习后端编程）
01-28 1万+
销毁组件： import React, { useState,useEffect } from 'react'; import {BrowserRouter as Router,Link,Route} from 'react-router-dom' function Index(){ useEffect(()=>{ console.log('Index页面的--来了...
React学习笔记十-生命周期（旧）
zhangawei123的博客
06-14 937
此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第十篇，主要介绍React非常重要的组件的生命周期(旧)。
React学习30（react扩展）
xiaojian044的博客
12-18 380
react扩展
react组件和hooks中使用settimeout取值不是最新值问题
前端三脚猫的博客
12-01 2642
在react中直接使用settimeout或者useEffect等hooks中使用settimeout来取值的时候，总是取到上一次更新的值而不是最新的值。
react新出来两个钩子函数是什么？和删掉的will系列有什么区别？react废弃了哪些钩子？为什么？
m0_60676278的博客
03-15 650
React16新的生命周期弃用了：新增了：新增的钩子函数能够代替弃用的三个钩子函数React16并没有删除这三个钩子函数，但是不能和新的钩子函getDerivedStateFromProps，getSnapshotBeforeUpdate数混用React17将会删除componentWillMount，componentWillReceiveProps，omponentWillUpdate新增了对错误的处理 componentDidCatch。
react取消所有请求_【react】react组件销毁中清理异步操作和取消请求
weixin_30682487的博客
12-23 976
1、问题bug 1()React中，因为异步操作的关系，组件销毁后调用了setState(),报警告，怎么解决？我在componetWillMount中访问了接口返回数据后，调用了setState，访问的时候按了后退，导致还没收到响应就销毁了组件 ，但是fetch请求没被结束掉，之后 收到响应就调用了setState()，发出警告。请问这种情况该怎么处理？在unmount中结束fetch吗？但fe...
规模化场景下的TwitterLite与高性能React渐进式Web应用
01-27
"规模化场景下的TwitterLite与高性能React渐进式Web应用，主要探讨了在全球大规模的React.js PWA项目TwitterLite中如何优化性能，包括初始加载时间、React组件渲染和图像加载等方面的改进，通过一系列小但有价值的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值