React pureComponent
时间:2020-05-29
本文章向大家介绍React pureComponent,主要包括React pureComponent使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、pureComponent的理解
pureComponent表示一个纯组件,可以用来优化react程序。减少render函数渲染的次数。提高性能 pureComponent进行的是浅比较,也就是说如果是引用数据类型的数据,只会比较不是同一个地址,而不会比较这个地址里面的数据是否一致 浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变的时候render是不会执行的。如果我们需要重新渲染那么就需要重新开辟空间引用数据 好处: 当组件更新时,如果组件的props或者state都没有改变,render函数就不会触发。省去虚拟DOM的生成和对比过程,达到提升性能的目的。具体原因是因为react自动帮我们做了一层浅比较 二、例子 import React, { PureComponent } from "react"; export default class List extends PureComponent{ constructor(){ super(); this.state = { userInfo:"李四", arr:[] } this.handleAdd = this.handleAdd.bind(this); this.handleModify = this.handleModify.bind(this); } render(){ let {userInfo,arr} = this.state; return ( <div> <h3>{userInfo}</h3> <ul> { arr.map((item,index)=>( <li>{item}</li> )) } </ul> <button onClick={this.handleAdd}>添加</button> <button onClick={this.handleModify}>修改</button> </div> ) } handleAdd(){ //render函数不会执行 因为newArr还是引用这arr的地址 地址没有发生改变 let newArr = this.state.arr; newArr.push("姓名"); this.setState({ arr:newArr }) } handleModify(){ //会执行 因为会做浅比较 this.setState({ userInfo:"张三" }) } } 三、使用场景 1、PureComponent一般会用在一些纯展示组件上。切结props和state不能使用同一个引用 2、在通过PureComponent进行组件的创建的时候不能够在写shouldComponentUpdate. 否则会引发警告
原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12987458.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法