react组件优化-优化setState过程

简介: react组件优化-优化setState过程

问题:

  1. 当调用setState是都会执行render(),即使数据不发生改变也会重新渲染页面=>降低效率
  2. 当触发render()时即使父组件不与子组件交互也会导致子组件的刷新=>降低效率

原因:

react生命周期中有一个钩子(shouldComponentUpdata),它是控制组件更新的阀门,该生命周期默认返回true即可以更改数据,之后触发render

解决思路:

只有当数据发生改变时才会经过shouldComponentUpdata,数据不发生改变是设置shouldComponentUpdata为false,使过程不再往下进行,不调用render()

解决办法(重写shouldComponentUpdata):

方法一:比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false


方法二:使用PureComponent,PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true(项目中一般使用)

目录
相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
66 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
51 6
|
1月前
|
JSON 前端开发 JavaScript
【简单粗暴】如何使用 React 优化 AG 网格性能
【简单粗暴】如何使用 React 优化 AG 网格性能
28 3
|
3月前
|
前端开发 JavaScript 大数据
React与Web Workers:开启前端多线程时代的钥匙——深入探索计算密集型任务的优化策略与最佳实践
【8月更文挑战第31天】随着Web应用复杂性的提升,单线程JavaScript已难以胜任高计算量任务。Web Workers通过多线程编程解决了这一问题,使耗时任务独立运行而不阻塞主线程。结合React的组件化与虚拟DOM优势,可将大数据处理等任务交由Web Workers完成,确保UI流畅。最佳实践包括定义清晰接口、加强错误处理及合理评估任务特性。这一结合不仅提升了用户体验,更为前端开发带来多线程时代的全新可能。
73 1
|
3月前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
64 0
|
3月前
|
前端开发 UED 开发者
React.lazy()与Suspense:实现按需加载的动态组件——深入理解代码分割、提升首屏速度和优化用户体验的关键技术
【8月更文挑战第31天】在现代Web应用中,性能优化至关重要,特别是减少首屏加载时间和提升用户交互体验。React.lazy()和Suspense组件提供了一种优雅的解决方案,允许按需加载组件,仅在需要渲染时加载相应代码块,从而加快页面展示速度。Suspense组件在组件加载期间显示备选内容,确保了平滑的加载过渡。
136 0
|
3月前
|
缓存 前端开发 JavaScript
深入探索优化React应用程序的策略
【8月更文挑战第20天】
43 0
|
5月前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
5月前
|
缓存 前端开发 JavaScript
如何对 React 函数式组件进行优化
如何对 React 函数式组件进行优化
|
6月前
|
前端开发 开发者
React useMemo钩子指南:优化计算性能
React useMemo钩子指南:优化计算性能