React中的三种类型组件介绍

React从诞生到现在，越来越多的前端开发者喜欢上该框架，其原因有很多，其中一个主要的原因是因为它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。

在讲组件之前，先介绍一下React组件的两个重要特性：

props:组件属性，专门用来连接父子组件间通信，父组件传输父类成员，子组件可以利用但不能编辑父类成员；
state：专门负责保存和改变组件内部的状态；

现在开始步入主题了

受控类型组件：

A）非受控组件
定义：该组件内部的状态不受state控制；
一般模式：

<component defaultVaule='' />

缺点：组件的变化不容易管理；
demo：

B）受控组件
定义：组件的状态变化受到state的控制；
模式：

 组件的值----state控制；组件值得变换---通过触发onChange事件，然后由this.setState负责改变；

demo：

无状态组件

定义：若一个组件不含有状态和对状态的处理，则可以将render方法单独抽取出来，成为一个独立的组件函数；

特点：
1）不包含任何状态，但可以包含属性；
2）无状态组件生成时不用实例化；
3）无状态组件没有this，ref和生命周期；

作用：
1）单纯的UI表现，不用涉及太多的交互；
2）不用对DOM做过多的操作；
demo：

注意：
无状态组件转化为有状态组件，则通过高阶组件转化；方式就是高阶组件通过props传入state。

demo：

高阶组件

定义：一个包含了另一个React组件的React组件；本质上就是一个函数.
形式：

包装方式：属性代理和反向代理；
特点：不会改变被包装组件的内容，结构，不会复制它的行为，是利用它创建一个新的行为；

属性代理：

定义：高阶组件接受外界实行，然后通过包装环境传递给被包装组件；
形式：

function HOC(Com) {其他处理；return class [Name] extends Component {constructor(props) {super(props);}render() {return (<div><Com {...this.props} /></div>)}}
}

Name:可以指定返回组件的名称；

反向代理

定义：指定的组件作为另一个组件的父类，而继承了的组件就是一个高阶组件
特点：
1）该组件是被动被继承；
2）高阶组件可以通过this来获取父类的state，props，生命周期函数和渲染函数；
3）一般来说，若调用父类的生命周期和渲染函数，用super来调用，以便保护父类的生命周期和渲染函数；
优势：
渲染劫持：高阶组件通过props属性来决定父类的渲染树是否被渲染（props不能创建或者改变props的名称，但可以更改和操作props的值）；
demo：

function HOC(B){return class [A] extends B{render(){return super.render();}}

React中的三种类型组件介绍相关推荐

html5中标签分为,HTML标签的三种类型
HTML标签的类型分为三种:行内元素,行内块元素,块级元素而标签的属性是可以转换的 display:inline: 转换为行内元素 display:linline-block 转换为行内块元素 di ...
mysql double 转字符串_没想到！在MySQL数据库中的数据有这三种类型！
MySQL数据库是一个或多个数据列构成二维表,它的每一种数据列都有特定类型,而类型决定MySQL是怎么看待该列数据,如果把整型数值存放到字符类型的列中,MySQL则会把它当成字符串来处理. MySQL ...
一文介绍机器学习中的三种特征选择方法
作者 | luanhz 来源 | 小数志导读机器学习中的一个经典理论是:数据和特征决定了机器学习的上限,而模型和算法只是逼近这个上限.也正因如此,特征工程在机器学习流程中占有着重要地位.广义的特征 ...
java中三种转string的方法_java中int,char,string三种类型的相互转换
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将 ...
java将一个整数按字节输出_在java中的整数类型有四种，分别是 byte short int long 其中byte只有一个字节 0或1，在此不详细讲解。其他的三种类型如下：1、...
在java中的整数类型有四种,分别是 byte short int long 其中byte只有一个字节 0或1,在此不详细讲解. 其他的三种类型如下: 1. 基本类型:short 二进制位数:16 ...
c语言实现进程隐藏和保护,C/C++程序开发中实现信息隐藏的三种类型
无论是模块化设计,还是面向对象设计,还是分层设计,实现子系统内部信息的对外隐藏都是最关键的内在要求.以本人浅显的经验,把信息隐藏按照程度的不同分成(1)不可见不可用(2)可见不可用(3)可见可用. 1 ...
kettle中三种类型：增量不裁剪，增量裁剪，全量
(1)增量表,全量表,快照表原图片来源: 什么是增量表,全量表,快照表 - 简书 https://www.jianshu.com/p/d53b44b15655 (2)裁剪不裁剪参看: SQL TR ...
分布式锁简单入门以及三种实现方式介绍(滴滴)
很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多线程相关的东西就很难理解,今天需要探讨的 ...
如何从零开始创建React项目（三种方式）
在开发 React 项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建 React 项目的方式,分别是 "在浏览器中直接引入&qu ...
分布式锁简单入门以及三种实现方式介绍
分布式锁简单入门以及三种实现方式介绍 2018年01月11日 21:16:28 徐刘根阅读数:37912 标签: 分布式分布式锁高并发更多个人分类: 集群分布式版权声明:本文为博主原创文章 ...

React中的三种类型组件介绍

React中的三种类型组件介绍相关推荐

最新文章

热门文章