iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Component与PureComponent对比解析
  • 345
分享到

Component与PureComponent对比解析

Component PureComponent解析Component PureComponent 2023-03-01 14:03:38 345人浏览 泡泡鱼
摘要

目录题外话官方文档对比取消外部数据引入为什么被称为浅比较小知识点说明另类的不更新总结题外话 有啥不对的请多多指教,研究的不算很深,记录为了分享,也为了博采众长,完善知识。 官方文档

题外话

有啥不对的请多多指教,研究的不算很深,记录为了分享,也为了博采众长,完善知识。

官方文档

React.PureComponent 与 React.Component很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

官方解释也很容易理解,React.PureComponentReact.Component中多实现了一个方法,就导致了在组件数据发生变化时,React.PureComponent会先进行和上一次的比较,如果相同,就不会再继续更新了。

口说无凭,还是得通过代码来体会。

对比

先看两者相同得地方 代码如下

class Box1 extends React.Component {
  render() {
    console.log('Box1 update');
    return <div>Box1: {this.props.count}</div>;
  }
}
class Box2 extends React.PureComponent {
  render() {
    console.log('Box2 update');
    return <div>Box2: {this.props.count}</div>;
  }
}

先制作2个对比的组件Box1与Box2, 然后制作一个父组件引入其中,并设置一个方法

export default () => {
  const [count, setCount] = React.useState(1);
  console.log('parent update');
  return (
    <div>
      <Box1 count={count}/>
      <Box2 count={count}/>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

此时,点击button按钮的时候,上述2个Box组件都会进行更新。

这也是最基础的组件更新。

取消外部数据引入

class Box1 extends React.Component {
  render() {
    console.log('Box1 update');
    return <div>Box1</div>;
  }
}
class Box2 extends React.PureComponent {
  render() {
    console.log('Box2 update');
    return <div>Box2</div>;
  }
}
export default () => {
  const [count, setCount] = React.useState(1);
  console.log('parent update');
  return (
    <div>
      <Box1 />
      <Box2 />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

取消Box组件内对外部count的引入

此时页面更新为

此时会发现只有Box1重新刷新了一遍,而Box2未重新加载组件,也就是PureComponent内部做了浅比较相同的不会进行更新。

为什么被称为浅比较

浅比较是指对值类型进行比较,而稍微复杂一点的引用类型(Object),就无法进行判断了,react内部的更新都是浅比较。

export default () => {
  const [count, setCount] = React.useState({ num: 1 });
  console.log('parent update');
  const click = () => {
    const newCount = count;
    newCount.num = count.num + 1;
    setCount(newCount);
    console.log('update:', count)
  };
  return (
    <div>
      <Box1 />
      <Box2 />
      <button onClick={click}>+1</button>
    </div>
  );
};

此时,父组件内部的count为对象类型,此时进行更新时,页面不会触发任何更新,父组件也不会进行刷新(由于是引用类型,newCount发生数据变化时,count其实已经发生变化,但是页面并不会有任何的反应)。

由图可见,子组件和父组件并没有进行刷新,均未打印。

小知识点

const的不可变定义也是只对于值类型而言,对于引用类型,还是依然可变。上述代码云清并不会报错。

说明

上述的一切代码都是建立在父组件自身更新的基础上子组件才会刷新,如果我将setCount(count + 1)改为setCount(count + 0),那么,父组件本身不会进行刷新,子组件也就理所当然的不会有任何变化。

另类的不更新

这里的父组件刷新带动子组件刷新有一种例外的情况。代码如下

const Parent = ({ children }) => {
  const [count, setCount] = React.useState(1);

  console.log('parent update');
  return (
    <div>
      {children}
      <button onClick={() => setCount(count + 1)}>box2</button>
    </div>
  );
};

export default () => {
  return (
    <Parent>
      <Box1 />
      <Box2 />
    </Parent>
  );
};

将父组件抽离出来,子组件以children的形式引入。 此时页面点击发生的变化为

会发现不管怎么点击,只有Parent组件进行刷新,子组件全部都毫无反应。

这个原因我不得而知,可能是因为react生成dom的时候问题,这个等待深入学习后再来解答。

总结

PureComponent多用于抽取本地缓存制作的下拉框组件或者是根据数据字典生成的展示组件,这种固定的组件基本在用户使用时不会有任何的变化,只在登录和页面加载最开始生成。

以上就是Component与PureComponent解析的详细内容,更多关于Component PureComponent解析的资料请关注编程网其它相关文章!

--结束END--

本文标题: Component与PureComponent对比解析

本文链接: https://www.lsjlt.com/news/198029.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Component与PureComponent对比解析
    目录题外话官方文档对比取消外部数据引入为什么被称为浅比较小知识点说明另类的不更新总结题外话 有啥不对的请多多指教,研究的不算很深,记录为了分享,也为了博采众长,完善知识。 官方文档...
    99+
    2023-03-01
    Component PureComponent解析 Component PureComponent
  • Component与PureComponent对比源码分析
    这篇文章主要介绍了Component与PureComponent对比源码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Component与PureComponent对比源码分析文章都会有所收获,下面我们一起...
    99+
    2023-07-05
  • TypeScript与JavaScript对比及打包工具对比分析
    这篇文章主要介绍了TypeScript与JavaScript对比及打包工具对比分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇TypeScript与JavaScript对比及打包工具对比分析文章都会有所收获,...
    99+
    2023-07-05
  • Clojure与Java对比实例分析
    这篇文章主要介绍“Clojure与Java对比实例分析”,在日常操作中,相信很多人在Clojure与Java对比实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Clojure与Java对比实例分析”的疑...
    99+
    2023-07-02
  • Go语言编码解析:UTF-8与GBK对比
    Go语言编码解析:UTF-8与GBK对比 在Go语言中,处理字符串编码是常见的任务之一。其中,UTF-8和GBK是两种常用的字符编码方式。本文将对UTF-8和GBK进行详细对比,探讨它...
    99+
    2024-04-02
  • C语言与Python的对比与分析
    C语言与Python的对比与分析 C语言和Python是两种不同的编程语言,各有优点和适用场景。C语言作为一种底层语言,被广泛应用于系统编程、嵌入式开发等领域,具有高效性和灵活性的特点...
    99+
    2024-04-02
  • Aspectj与Spring AOP的对比分析
    1、简介 今天有多个可用的 AOP 库, 它们需要能够回答许多问题: 1、是否与用户现有的或新的应用程序兼容? 2、在哪里可以实现 AOP? 3、与自己的应用程序集成多快? 4、性能...
    99+
    2024-04-02
  • C语言与C++对比分析:你了解吗?
    c++++ 相较于 c 语言的优势在于:语法更灵活,支持面向对象编程,提供自动内存管理,拥有函数重载和模板等高级功能,提升代码可读性和可维护性。 C 语言与 C++ 对比分析:深入了解...
    99+
    2024-04-03
    c++ c语言 代码可读性
  • Go语言与GoJS:功能对比与应用场景解析
    【标题】Go语言与GoJS:功能对比与应用场景解析 【正文】 随着计算机科学和软件开发领域的不断发展,不同的编程语言和工具被开发出来,以满足不同需求和解决不同问题。其中,Go语言和Go...
    99+
    2024-04-02
  • hive与rdbms对比的分析说明
    这篇文章给大家分享的是有关hive与rdbms对比的分析说明的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Hive并非为联机事务处理而设计,Hive并不提供实时的查询和基于行级的数据更新操作。Hive是建立在Ha...
    99+
    2023-06-03
  • MySQL中InnoDB与MyISAM的对比分析
    小编给大家分享一下MySQL中InnoDB与MyISAM的对比分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!对比InnoDB与MyISAM1、 存储结构MyI...
    99+
    2023-06-27
  • Pytorch中Softmax与LogSigmoid的对比分析
    Pytorch中Softmax与LogSigmoid的对比 torch.nn.Softmax 作用: 1、将Softmax函数应用于输入的n维Tensor,重新改变它们的规格,使n维...
    99+
    2024-04-02
  • mybatis中注解与xml配置的对应关系和对比分析
    注解与xml配置的对应关系 mybatis中注解就是简单不需要写配置文件,适合简单的数据处理,理解起来比较容易,不动态生成SQL时候可以用用。 需要绑定,有些时候不如配置文件,配置文...
    99+
    2024-04-02
  • 同步与异步:Python与Laravel的对比分析
    在现代的软件开发中,同步和异步是两个重要的概念。同步指的是程序在执行某个任务时,必须等待该任务完成后才能执行下一个任务。而异步则是指程序在执行某个任务时,可以继续执行其他任务,不必等待该任务完成。Python和Laravel是两种常用的编...
    99+
    2023-09-16
    并发 同步 laravel
  • Angular与Component store使用实例分析
    这篇“Angular与Component store使用实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“An...
    99+
    2023-07-05
  • JS中Require与Import区别对比分析
    require 和 import对比区别 在 JavaScript 中,require 和 import 都是用来导入模块的。require 是 Node.js内置的方法,而 i...
    99+
    2023-03-02
    JS Require对比Import区别 Require Import区别
  • 阿里云 ECS 付费方式全面解析与对比
    阿里云 Elastic ComputeService(ECS)是阿里云提供的一种云计算服务,通过它可以轻松构建、部署和管理弹性计算的应用程序。本文将全面解析阿里云 ECS的付费方式,帮助您更好地理解并选择适合自己的付费模式。 一、阿里云 E...
    99+
    2023-11-12
    阿里 付费方式 ECS
  • hystrix配置中Apollo与Archaius对比分析
    目录前言ARCHAIUS警告日志我们遇到的问题HYSTRIX在FEIGN中的加载过程SPRINGBOOT自动加载HYSTRIXHYSTRIX的动态兜底配置APOLLO配置驱动HYST...
    99+
    2024-04-02
  • PHP 函数与 Kotlin 函数对比分析
    php 和 kotlin 函数处理方式对比:声明:php 使用 function,kotlin 使用 fun。参数传递:php 按值传递,kotlin 可选按值或按引用。返回值:php ...
    99+
    2024-04-24
    php kotlin
  • 浅析java中next与nextLine用法对比
    java中next与nextLine用法区别:next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键、Tab键或Enter键等结束符next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后输...
    99+
    2023-05-31
    java next nextline
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作