好客租房85-组件性能优化(5纯组件)

简介: 好客租房85-组件性能优化(5纯组件)

图片.png

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

.

前言

最好的种树是十年前 其次是现在

001.gif

面试题什么是纯组件(react)

React 有一个特点,那就是当父组件重新 render 的时候,无论传入子组件的 props 有没有变化,子组件都会重新 render。但是这种 render 很多情况下是没有必要的。

.

代码案例

父组件

import React, { Component } from 'react';
import Son from './Son';
class Father extends Component {
    constructor(props) {        
     super(props);        
     this.state = { value:0 }    
     }    
     onClick=()=>{        
      this.setState({
            value : this.state.value+1
        })    
     }    
      render() {
         console.log('我是爸爸组件')
         return (<div>
             <button onClick={this.onClick}>click me</button>
             <Son value={this.state.value}/>
             </div>  );    
  }}
export default Father;

子组件

import React, { Component,PureComponent } from 'react';
class Son extends Component {
  constructor(props) {
          super(props); 
          this.state = {  }    
          }    
          render() {
          console.log('我是儿子组件')
          return ("<div>
          {this.props.value}
          </div> " 
          );   
  }}

子组件改成 PureComponent,即,当检测到 props 没有变化的时候,并不重新渲染。但是当这个点击事件开始触发的时候就会发生变化,这个是无法改变的 PureComponent是控制子组件状态不改变的方式之一


当第一次改变的时候 打印的值


//我是父亲组件  我是儿子组件 我是父亲组件  我是儿子组件


当点击事件的时候 打印的值


//我是父亲组件   我是父亲组件  我是父亲组件 我是父亲组件


相关文章
|
机器学习/深度学习 Python
【Python机器学习】全连接层与非线性回归、防止过拟合方法的讲解及实战( 附源码)
【Python机器学习】全连接层与非线性回归、防止过拟合方法的讲解及实战( 附源码)
527 0
|
5月前
|
API 数据库 开发者
免费的批量标签制作软件,这几款值得一试
如果你所在团队需要在有限预算下实现批量标签制作、打印和二维码管理,可以优先选择草料二维码(仅需二维码标签的场景)。对于信息化程度较高或有定制需求的企业,也可考虑 BarTender 等商业软件。电商/仓储等需要频繁打印的用户,可以考虑精臣打印机+云打印软件的行驶时,成本更可控
免费的批量标签制作软件,这几款值得一试
|
10月前
|
SQL 安全 Java
JavaSecLab 一款综合Java漏洞平台
JavaSecLab是一款综合型Java漏洞学习平台,涵盖多种漏洞场景,提供漏洞代码、修复示例、安全编码规范及友好UI。适用于安全服务、甲方安全培训、安全研究等领域,助于理解漏洞原理与修复方法。支持跨站脚本、SQL注入等多种漏洞类型……
263 2
|
JSON API 数据格式
gRPC 四模式之 一元RPC模式
gRPC 四模式之 一元RPC模式
164 0
|
12月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
SQL 前端开发 Java
我这样写代码,比直接使用 MyBatis 效率提高了 100 倍
Mybatis Hibernate 等都是我们常用的 ORM, 它们有时候很好用,但某些场景下也很繁琐,比如下文要讲的一个需求,最后本文会给出比直接用这些 ORM 开发效率至少提高 100 倍的方法...
135 1
我这样写代码,比直接使用 MyBatis 效率提高了 100 倍
|
机器学习/深度学习 存储 算法
基于MATLAB的神经网络(ANN)回归
基于MATLAB的神经网络(ANN)回归
274 1
|
JavaScript 应用服务中间件 nginx
Vue打包后Echarts图表不显示问题解决
Vue打包后Echarts图表不显示问题解决
|
存储 机器学习/深度学习 算法
C#实现十六进制和十进制相互转换【及不同进制表示】
在程序中,十六进制的表示形式通常为字符串;而十进制则为数字整型(本质的内存存储都是01二进制)。数字的进制表示一般使用的不多,通常最大的需求是进制之间的相互转换。C#中提供了内置的转换方法...
848 0
C#实现十六进制和十进制相互转换【及不同进制表示】

热门文章

最新文章