React中创建组件的3种方式
目前作者所知道的创建react组件的方式有三种:
- 函数式定义(无状态组件)
function MyComponent(props){
return(
<h1>mycomponent</h1>
)
} - es5原生方式
const MyComponent=React.createClass({
render:function () {
return <h1>mycomponent</h1>
}
}) - es6中class类的方式(有状态组件)
class MyConponent extends React.Component{
constructor(props){
super(props);
}
render() {
return (
<h1>mycomponent</h1>
);
}
}注意:无论使用哪种方式创建组件,组件名称的首字母都必须大小,因为我们写的是JSX,最后是需要通过babel转义成es5的语法的,而babel在进行转义JSX语法时,是调用了 React.createElement() 这个方法,这个方法需要接收三个参数:type, config, children。第一个参数声明了这个元素的类型,当创建自定义组件时没有首字母小写时, 而 babel 在转义时把它当成了一个字符串 传递进去了;当首字母大写时,babel 在转义时传递了一个变量进去。问题就在这里,如果传递的是一个字符串,那么在创建虚拟DOM对象时,React会认为这是一个原生的HTML标签,但是这显然不是一个原生的HTML标签,因此去创建一个不存在的标签肯定是会报错的。如果首字母大写,那么就会当成一个变量传递进去,这个时候React会知道这是一个自定义组件,因此他就不会报错了。
那么问题来了,这三种方式有啥区别呢?这里说明一个问题,很多时候同一种效果往往有很多种实现方式,所以我们在学习的过程中要避免章节化思维,要对技术进行横向比较,这样能帮你更 加深入的理解各种方式的优缺点。
1.函数式定义和类定义的对比
函数式定义组件没有state和生命周期函数且不能访问this,而类定义中这些都可以有。
2.类定义和React.createClass原生定义的区别
2.1函数this的绑定
React.createClass创造的组件,其每一个成员函数的this都会自动由React绑定,所以使用时可以直接this.method,而通过class创建组件的成员函数则需要手动绑定,如this.method=this.method.bind(this).
2.2Mixins特性
使用 React.createClass
的话,我们可以在创建组件时添加一个叫做 mixins
的属性,并将可供混合的类的集合以数组的形式赋给 mixins,关于mixins不了解的同学可以参考mixins的前世今生
3.如何选择哪种方式创建组件
由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins
替代方案之前是不会废弃掉React.createClass
形式。所以:
能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。
除此之外,创建组件的形式选择还应该根据下面来决定:
1、只要有可能,尽量使用无状态组件创建形式。
2、否则(如需要state、生命周期方法等),使用`React.Component`这种es6形式创建组件
React中创建组件的3种方式的更多相关文章
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- 【java并发】传统线程技术中创建线程的两种方式
传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...
- Java中创建线程的两种方式
创建线程的第一种方式: 创建一个类继承Thread 重写Thread中的run方法 (创建线程是为了执行任务 任务代码必须有存储位置,run方法就是任务代码的存储位置.) 创建子类对象,其实就是在创建 ...
- Java并发基础01. 传统线程技术中创建线程的两种方式
传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React创建组件的三种方式及其区别
内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...
- React创建组件的三种方式比较
推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...
- React创建组件的三种方式比较和入门实例
推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...
- react中创建组件
第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...
随机推荐
- 设置windows2008系统缓存大小限制,解决服务器运行久了因物理内存耗尽出僵死(提升权限后,使用SetSystemFileCacheSize API函数,并将此做成了一个Service)
声明: 找到服务器僵死的原因了,原因是虚拟内存设置小于物理内存. 只要虚拟内存设置为系统默认大小就不会出生僵死的现象了. 当时因为服务器内存48G,系统默认虚拟内存大小也是48G, 觉得太占硬盘空间, ...
- jquery测试文档
Jquery版本:* jQuery JavaScript Library v1.3.2 * http://jquery.com/ 引用:<script src="JS/jquery.j ...
- spring boot单元测试之RestTemplate(三)——api详解
本篇内容来自翟永超的<Springcloud微服务实战>,转载请注明. 一.GET请求 在RestTemplate中,对GET请求可以通过如下两个方法进行调用实现. 第一种:getForE ...
- Libra 加密稳定币:Facebook的"野心"?
2008年11月1日,有一个传说叫中本聪的日裔美国人,发表了一篇名为<比特币:一种点对点式的电子现金系统>的论文.2009年,比特币出世,从此开启了电子货币这个收割机器,全世界的韭菜都是一 ...
- 『 效率工具 』Spring Boot版的轻量级代码生成器,减少70%以上的开发任务
一. 前言 之前很着迷于代码自动生成,减少写重复代码的工作量.网络上也搜索了很久,有基于插件的,有GUI的.但其配置和学习成本都比较高,都不是很如我意. 本想自己用SpringBoot写一个,在收集相 ...
- 音视频技术“塔尖”之争,网易云信如何C位出道?
音视频技术“塔尖”之争,网易云信如何C位出道? 社交+美颜.抖音短视频.在线狼人杀.直播竞答.子弹短信……,过往两三年间,互联网新产品和新玩法层出不穷,风口不断切换.这些爆红的网络应用背后,都有一些共 ...
- java编程思想之面向对象
面向对象和面向过程 面向对象(Object Oriented),简称OO,是软件开发方法的一种,我们都知道java是基于面向对象开发的,但是说到面向对象,我们不得不提一提面向过程开发,面向过程,又称结 ...
- yii后台模板标签
yii模板中的label标签 <?php echo $form->labelEx($model,'name'); ?> 编译后: <label for="Projec ...
- python算法与数据结构-数据结构中常用树的介绍(45)
一.树的定义 树是一种非线性的数据结构,是由n(n >=0)个结点组成的有限集合.如果n==0,树为空树.如果n>0,树有一个特定的结点,根结点根结点只有直接后继,没有直接前驱.除根结点以 ...
- 浅说——状压DP
第一次没认真听,没听懂.(有点难) 第二次才搞懂,主要位运算太烦了!!! 位运算基础知识: 名称 符号 规则 按位与 & 全一则一,否则为零 按位或 | 有一则一,否则为零 按位取反 ~ 是零 ...