好客租房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


相关文章
|
8月前
|
缓存 前端开发 JavaScript
前端性能优化的方式
前端性能优化的方式
74 1
|
4月前
|
缓存 前端开发 JavaScript
探索前端性能优化:从加载速度到用户体验的全面升级
探索前端性能优化:从加载速度到用户体验的全面升级
69 0
|
2月前
|
缓存 前端开发 JavaScript
前端框架的数据驱动方式对性能有哪些影响?
前端框架的数据驱动方式对性能有哪些影响?
|
5月前
|
缓存 前端开发 JavaScript
优化前端性能:从渲染到加载的全方位策略
前端性能优化是提升用户体验的关键因素。本文探讨了从浏览器渲染到资源加载的各个方面,介绍了使用现代工具和技术的策略,包括减少关键渲染路径、优化资源加载和利用缓存。通过实施这些策略,可以显著提高页面响应速度,减少加载时间,提供更流畅的用户体验。
|
8月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
420 1
|
8月前
|
缓存 前端开发 JavaScript
优化前端性能:减少页面加载时间的六大技巧
本文将探讨如何通过改善前端性能来减少页面加载时间,从而提升用户体验。我们将介绍六种实用的技巧,包括减少HTTP请求、压缩资源文件、使用CDN加速、延迟加载、缓存策略和代码优化,帮助开发人员有效地提升网页性能。
|
前端开发 Serverless 开发者
前端工程化的前端性能的性能优化方案的渲染层面优化之懒加载
懒加载是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
100 0
|
移动开发 前端开发 JavaScript
前端工程化的前端性能的性能优化方案的渲染层面优化之DOM优化
DOM 优化是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
93 0
|
前端开发 JavaScript API
前端性能优化之企业项目加载渲染和首屏优化(7)
前端性能优化之企业项目加载渲染和首屏优化(7)
721 0
|
前端开发
好客租房84-组件性能优化(4减少不必要的渲染)
好客租房84-组件性能优化(4减少不必要的渲染)
128 0
好客租房84-组件性能优化(4减少不必要的渲染)