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