好客租房83-组件性能优化(3减少不必要的渲染)

简介: 好客租房83-组件性能优化(3减少不必要的渲染)

   //导入react

   import React from 'react'

   import ReactDOM from 'react-dom'

   

   //导入组件

   // 约定1:类组件必须以大写字母开头

   // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

   // 约定3:组件必须提供render方法

   // 约定4:render方法必须有返回值

   

   class App extends React.Component {

       constructor(props) {

           super(props)

           console.log('生命周期钩子函数:construtor')        

       }

       state={

           number:0

       }

   

       

       shouldComponentUpdate(nextProps,nextState){

           //根据条件判断渲染true或者false

           //如果前后两次数据相同就不用render

           if(nextState.number===this.state.number){

               return false

           }

           return true

   

       }

       handleClick=()=>{

           this.setState(()=>{

              return {

                  number:Math.floor(Math.random()*3)

              }

           }    

           )

       }

       render() {

           console.log('生命周期钩子函数:render')

           console.log(this.props,"props")

           return (

               <div id="title">

                     <h1>随机数:{this.state.number}</h1>

                     <button onClick={this.handleClick}>重新生成</button>          

               </div>

           )

       }

   }

   

   

   

   ReactDOM.render(<App></App>, document.getElementById('root'))

运行结果

图片.png


相关文章
|
3月前
|
存储 缓存 监控
解锁Vuex性能优化的秘密:让大型Vue应用如丝般顺滑,紧跟技术热点,体验速度与效率的双重飞跃!
【8月更文挑战第27天】Vuex是Vue.js应用程序的状态管理解决方案,它允许开发者集中管理组件间共享的状态。然而,在大型应用中,庞大的状态树可能会影响性能。本文介绍几种优化策略:1)精简状态树,避免存储不必要的数据并通过模块化降低复杂度;2)利用getters缓存计算结果以提高效率;3)通过actions处理异步操作,确保状态更新的同步性和逻辑清晰;4)在组件级别上减少不必要的重渲染;5)使用工具如Vue Devtools进行监控和调试。这些方法有助于提升应用的整体性能和用户体验。
86 0
|
23天前
|
缓存 安全 前端开发
动态组件和异步加载在大型应用中的劣势
【10月更文挑战第23天】动态组件和异步加载虽然在大型应用中有诸多优势,但也不可避免地存在一些劣势。在实际应用中,需要综合考虑这些因素,根据项目的具体需求和情况来合理选择和运用这些技术,以实现最佳的效果和用户体验。同时,不断探索和改进这些技术的应用方法,以应对可能出现的问题和挑战。
|
4月前
|
监控 Java 图形学
【性能优化篇】U3D游戏卡顿大作战:内存与渲染效率的极致提升
【7月更文第12天】在Unity3D游戏开发领域,性能优化是决定玩家体验好坏的关键一环。游戏频繁卡顿,不仅破坏了沉浸式体验,还可能造成玩家流失。本文将深入探讨如何有效解决U3D游戏卡顿问题,特别聚焦于内存管理和渲染效率两大核心领域,助力开发者打造流畅丝滑的游戏世界。
360 0
|
6月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
374 1
|
6月前
|
缓存 前端开发 JavaScript
优化前端性能:减少页面加载时间的六大技巧
本文将探讨如何通过改善前端性能来减少页面加载时间,从而提升用户体验。我们将介绍六种实用的技巧,包括减少HTTP请求、压缩资源文件、使用CDN加速、延迟加载、缓存策略和代码优化,帮助开发人员有效地提升网页性能。
|
存储 缓存 JavaScript
前端优化方案
前端优化方案
287 31
|
存储 缓存 负载均衡
前端优化方式的总结
前端优化方式的总结
|
前端开发 JavaScript 测试技术
为了降低维护成本(早点下班),我在组件开发中所做的那些优化(偷懒)
组件开发中为了稳定性、健壮性,经常需要为组件编写测试用例,然后还要为了开发者方便使用编写文档,都是非常耗时间的差事。作为一个独立维护组件库的程序员,为了能够降低组件维护的成本(早点下班),我总结了一下自己过去几年为了让组件开发更加高效所做的那些事情(偷的那些懒)。
|
前端开发 JavaScript API
前端性能优化之企业项目加载渲染和首屏优化(7)
前端性能优化之企业项目加载渲染和首屏优化(7)
645 0
|
前端开发
好客租房84-组件性能优化(4减少不必要的渲染)
好客租房84-组件性能优化(4减少不必要的渲染)
118 0
好客租房84-组件性能优化(4减少不必要的渲染)