React中的高阶组件,无状态组件,PureComponent
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的更多相关文章
- React中的高阶组件
高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React系列文章:无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- react的redux无状态组件
Provider功能主要为以下两点: 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connec ...
- React: 无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...
- 15. react UI组件和容器组件的拆分 及 无状态组件
1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件 进行逻辑操作 UI组件的拆分 新建一个 ...
- Blazor中的无状态组件
声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只 ...
- 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!
状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...
- Flutter入门之无状态组件
Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
随机推荐
- Appium的环境搭建和配置
Appium的环境搭建和配置 一.安装Nodejs 下载nodejs安装包(https://nodejs.org/en/download/)安装 下载后,双击安装文件,按提示来安装. 测试安装是否成功 ...
- 测试开发的成长之路 - 自动化一站式平台(UI、接口)
前言 在自动化测试过程中,随着对接的自动化需求不断增加,测试用例数量显著上升,参与自动化测试的人也越来越多,多人协作就会碰到很多问题,包括脚本.数据.版本.项目整合.持续集成等,而且也增加了后期维护的 ...
- List和String数组相互转化
在工作中经常会遇到需要String[] 参数的地方,我们可以先定义一个list,再转成String[] 来使用,使用list的好处自然是可以随时方便的添加删除元素,下面是方法: List list = ...
- linux学习总结----redis总结
安装 下载:打开redis官方网站,推荐下载稳定版本(stable) 解压 tar zxvf redis-3.2.5.tar.gz 复制:推荐放到usr/local目录下 sudo mv -r ...
- netty in action 笔记 二
netty的数据容器 网络数据的基本单位大多为字节,Java NIO 提供了ByteBuffer 作为它的字节容器,但使用起来过于复杂和繁琐.在Netty中, ByteBuffer 替代品是ByteB ...
- 【MFC】学习与问题整合
需要源码联系邮件:kangxlchn@163.com 1.新建一个MFC工程(基于对话框) 环境:vs2017 统统NEXT 新建完成后打开MFCPrj.cpp文件 打开类试图 每创建一个MFC项目, ...
- Python入门(3)
一.列表 列表是用来储存和处理多个数据的数据类型,我们可以像下面这样来创建一个列表: my_list = [1, 2, 3] 列表和数学中的集合很像,但是,列表中的数据是可以重复,并且他们是有序的,列 ...
- 90 [LeetCode] Subsets2
Given a collection of integers that might contain duplicates, nums, return all possible subsets (the ...
- windows store无法登陆的问题解决方案
Windows应用商店或商店Apps无法打开或闪退的可选方法 (仅用于10565之前的Windows 10版本) 右键点击任务栏,选择"属性",切换到"导航"选 ...
- Struts2文件上传带进度条,虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...