首页 > 其他分享 >React中Component和PureComponent深度解析

React中Component和PureComponent深度解析

时间:2022-12-12 14:35:27浏览次数:28  
标签:shouldComponentUpdate Component React state props PureComponent

React.PureComponent与React.Component几乎完全相同,但React.PureComponent通过props和state的浅对比来实现shouldComponentUpdate().
在PureComponent中,如果包含比较复杂的数据结构,可能会因为深层的数据不一致而产生错误的否定判断,导致界面得不到更新。

如果定义了shouldComponentUpdate(),无论组件是否是PureComponent,它都会执行shouldComponentUpdate结果来判断是否update。如果组件未实现shouldComponentUpdate(),则会判断该组件是否是PureComponent,如果是的话,会对新旧props、state进行shallowEqual比较,一旦新旧不一致,会触发update.
浅对比:通过遍历对象上的键执行相等性,并在任何键具有参数之间不严格相等的值时返回false。当所有的键的值严格相等时返回true。

区别点:

PureComponent自带通过props和state的浅对比来实现shouldComponentUpdate(),而Component没有。
PureComponent确定
可能会因为深层的数据不一致而产生错误的否定判断,从而shouldComponentUpdate结果返回false,界面得不到更新。

PureComponent优势

不需要开发者自己实现shouldComponentUpdate,就可以进行简单的判断来提升性能。

标签:shouldComponentUpdate,Component,React,state,props,PureComponent
From: https://www.cnblogs.com/huayang1995/p/16975948.html

相关文章

  • ReactNative 升级总结
    ReactNative升级总结ReactNative从0.53升级到0.63iOS项目总结1.ERRORInvariantViolation:ARThasbeenremovedfromReactNative.Itcannowbeinstalled......
  • #yyds干货盘点# react笔记之学习之props父子传值
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • #yyds干货盘点# react笔记之学习之显示日期
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • Task :react-native-clipboard_clipboard:compileDebugJavaWithJavac FAILED
    Task:react-native-clipboard_clipboard:compileDebugJavaWithJavacFAILED月深夜微凉于 2022-09-0217:57:19 发布830收藏文章标签:androidandroi......
  • React Native 0.68 安装react-native-picker报错:找不到compile
    react-native版本:0.68.2react-native-picker版本:4.3.7报错信息:Aproblemoccurredevaluatingproject':react-native-picker'.>Couldnotfindmethodcompile()......
  • react进阶用法完全指南
    React调用回调函数,正确设置this指向的三种方法通过bindthis.increment=this.increment.bind(this);通过箭头函数<buttononClick={this.multi}>点我*10</button......
  • react组件深度解读
    五、React核心是组件在React中,我们使用组件(有状态、可组合、可重用)来描述UI。在任何编程语言中,你都可以将组件视为简单的函数。React组件也一样,它的输入是props......
  • react-Suspense工作原理分析
    Suspense基本应用Suspense目前在react中一般配合lazy使用,当有一些组件需要动态加载(例如各种插件)时可以利用lazy方法来完成。其中lazy接受类型为Promise<()=......
  • react的jsx语法是怎样解析的
    首先我们来看看下面的代码import"react"from"react";constelement=(<div><div><span>1</span><span>2</span>......
  • React高级特性之Render Props
    renderprop是一个技术概念。它指的是使用值为function类型的prop来实现Reactcomponent之间的代码共享。如果一个组件有一个render属性,并且这个render属性的值为一个返......