1. 高阶组件

React中的高阶组件是一个函数,不是一个组件。

函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件。相当于将输入的React组件进行了一些增强。
React的高阶组件实际上是装饰器(Decorator)模式的一种实践。

2. 无状态组件(stateless component)

无状态组件又叫纯函数组件,就是没有state的组件,纯展示型组件。

React组件有两种类型,无状态组件和类组件,按照写法又有3种写法:

1. 函数式定义的 无状态组件
2. ES5定义的类组件 React.createClass
3. ES6定义的类组件 extends React.component

无状态组件有如下特点:

1. 组件不会被实例化,无需分配多余内存,渲染性能有所提升
2. 组件不能访问this对象,没有实例,自然没有this,this.state,this.ref均不能访问
3. 组件不能访问生命周期方法
4. 组件只能访问输入的props,不能修改,同样的输入得到一致的输出,无副作用

3. PureComponent

PureComponent也是Component的一种,其默认实现了shouldComponentUpdate的浅比较,是一种优化了的Component,React 15.3版本发布。
实现代码类似下面:

if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps)
|| !shallowEqual(inst.state, nextState);
}

PureComponent在shouldComponentUpdate中对对象只是进行浅比较,如果对象包含嵌套的对象和数组,则比较会出错。
实际使用的时候,对单层结构的state可以使用PureComponent,复杂结构的不要使用,否则组件可能不会更新。
此外,尽量不要修改React的state,而是返回一个全新的state。
PureComponent可以和immutable.js配合使用,使用不可变对象来保证组件状态的比较。

参考:https://www.cnblogs.com/wonyun/p/5930333.html

React中的高阶组件,无状态组件,PureComponent的更多相关文章

  1. React中的高阶组件

    高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...

  2. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  3. React系列文章:无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  4. react的redux无状态组件

    Provider功能主要为以下两点: 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connec ...

  5. React: 无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...

  6. 15. react UI组件和容器组件的拆分 及 无状态组件

    1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件  进行逻辑操作 UI组件的拆分 新建一个 ...

  7. Blazor中的无状态组件

    声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只 ...

  8. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!

    状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...

  9. Flutter入门之无状态组件

    Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...

随机推荐

  1. JavaWeb项目生成PDF文件添加水印图片并导出

    一.前言 首先需要在Maven中添加相应的jar包依赖,若项目没用到Maven,也可自行下载相应所需的jar包(itextpdf.jar 与 itext-asian.jar),如下图所示.点此下载 M ...

  2. Qt-QML-Charts-ChartView-编译错误-ASSERT: "!"No style available without QApplication!

    昨天本来是回家想好好琢磨一下使用Chart来绘制曲线的,奈何在建立项目的时候也就卡住了,加上心情比较烦躁,也没有耐心寻找答案就草草了事.所以今天继续搞定这个. 上图是Qt 的编译错误截图 QML de ...

  3. Fiddler使用总结(三)

    我们知道Fiddler是位于客户端和服务器之间的代理,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调试web应用.修改请求的数据,甚至可以修改 ...

  4. 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践

    05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...

  5. hibernate.hbm2ddl.auto=update不能自动生成表结构

    在写上篇文章<spring整合springmvc和hibernate>的时候,曾遇到一个问题 INFO: Server startup in 8102 ms Hibernate: inse ...

  6. Python 关键字参数和可变参数

    关键字参数 如果你有一些具有许多参数的函数,而你又希望只对其中的一些进行指定,那么你可以通过命名它们来给这些参数赋值——这就是python关键字参数(Keyword Arguments)——我们使用命 ...

  7. [Clr via C#读书笔记]Cp19可空值类型

    Cp19可空值类型 主要解决的是和数据库中null对应的问题: System.Nullable结构:值类型: int?语法: 可空实例能够使用操作符: C#空合并操作符??; 即可用于引用类型,也可以 ...

  8. react创建新项目并且修改配置文件

    react创建项目 这是我在用react搭建项目时,用到的一些东西,顺序纯属自己定义, 一.创建项目 用react 创建一个项目,这也是官方给出的 1.npm install create-react ...

  9. forward_list

    一.特性 单向链表,只支持单向顺序访问(不支持快速随机访问),是C++11标准新增的类型 可类比于数据结构——单(向)链表 1. 没有size操作 forward_list为了追求性能,省去了size ...

  10. 欢迎来怼--第七次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员: 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/19 17:05~17:17,总计12min. 地 ...