一、简介
在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式。其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在目前项目中使用率还是很高的。但随着后来技术更新,React组件创建的方式也在不断的变化和过时。到目前为止,大概有3种方式。分别是createClass、ES6的类组件、无状态函数式组件。
二、详解
方式一:React.CreateClass
1、复用性差:
<div id="container"></div>
<script type="text/babel"> //创建菜单组件
const menuList = React.createClass({
render() {
return React.createElement("ol", {"className": "menus"},
React.createElement("li", null, "beef"),
React.createElement("li", null, "pork"),
React.createElement("li", null, "Lamb"),
React.createElement("li", null, "fish"),
React.createElement("li", null, "chicken")
)
}
}); //创建组件节点
const list = React.createElement(menuList, null, null) //渲染挂载组件
ReactDOM.render(
list,
document.getElementById("container")
) </script>
2、复用性强:
<div id="container"></div>
<script type="text/babel"> //创建菜单组件
const menuList = React.createClass({
render() {
return React.createElement("ol", {"className": "menus"},
this.props.items.map(
(item, i) => React.createElement("li", {key:i}, item) //给每一项属性添加key,保证数据的唯一性
)
)
}
});
//创建菜单元素
const items = [
"beef",
"pork",
"Lamb",
"fish",
"chicken"
] //创建组件节点
const list = React.createElement(menuList, {items}, null) //渲染组件
ReactDOM.render(
list,
document.getElementById("container")
) </script>
方式二:ES6的类组件(一般写js中,作为导出组件使用)
<div id="container"></div>
<script type="text/babel"> //创建菜单组件类
class MenuList extends React.Component { render() { //对items进行解构赋值,作用域本地化
let {items} = this.props return React.createElement("ol",{"className": "menus"},
items.map((item, i) =>
React.createElement("li", {key:i}, item)
)
)
}
} //定义数组
const menuItems = ["pork", "fish", "chicken", "Lamb", "beef"] //渲染组件
ReactDOM.render(
React.createElement(MenuList,{items: menuItems},null),
document.getElementById("container")
) </script>
方式三:无状态函数式组件
它是纯函数而不是组件,因此,它没有this作用域。无状态函数式组件可以接收属性然后返回一个DOM元素,它是实践函数式编程范式的好方法。
<div id="container"></div>
<script type="text/babel"> //创建菜单组件(通过函数)
//未优化:该函数通过参数props收集数据,然后根据获得的数据为每一个元素返回一个有序列表
/*
const menuList = props => {
return React.createElement('ol', {"className": "nemus"},
props.items.map( (item, i) => React.createElement("li", {key:i}, item))
)
}
*/ //优化后:这里使用了属性参数解构,将列表属性作用域直接限制在函数内部,减少了点标记符号的使用
const menuList = ({items}) => {
return React.createElement("ol",{"className": "menus"},
items.map( (item,i) => React.createElement("li", {key:i}, item))
)
} //创建菜单元素
const items = ["pork","fish","chicken","Lamb","beef"] //创建组件节点
const list = menuList({items}) //渲染组件
ReactDOM.render(
list,
document.getElementById("container")
) </script>
四、组件工厂类
在组件中元素的创建方式基本上都是通过React.createElement。 其实,还有另外一种创建方式就是工厂类(Factory)。工厂类是一种特殊的对象,可以将实例化对象的细节封装起来,React内置的工厂类可以为所有的HTML元素提供支持。用户可以使用React.createFactory为组件创建自定义工厂类,从而达到简化代码的目的。
使用系统工厂类创建元素节点:
//React.DOM.li(null, "pork") : 第一个参数为元素属性、第二个参数为子节点
<li>pork</li> <=> React.DOM.li(null, "pork")
使用自定义组件工厂类创建组件:
<div id="container"></div>
<script type="text/babel"> //解构
const {render} = ReactDOM const MenuList = ({items}) =>
React.DOM.ol({"className": "menus"},
items.map( (item, i) =>
React.DOM.li({key:i}, item)
)
) //创建工厂类
const MenuListFactory = React.createFactory(MenuList) //创建菜单元素
const items = ["p_pork","f_fish","c_chicken","l_lamb","b_beef"] //渲染组件
render(
MenuListFactory({items}),
document.getElementById("container")
) </script>
五、简化
在上面介绍的React组件创建过程中,不论是使用React.createElement创建元素,还是使用系统工厂类Factory创建元素,都显得不够直接。Facebook团队在React中引入了JSX语法糖来声明元素标签,可以创建复杂的DOM树过程简单化,而且开发者可以很直观的梳理DOM树结构。具体实现,在之前的几篇文章都有讲解,此处就不介绍了。请看这里:https://www.cnblogs.com/XYQ-208910/p/11913238.html。
React: React组件创建的三种方式的更多相关文章
-
黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
-
vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
-
于Unity3D动态创建对象和创建Prefab三种方式的原型对象
于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...
-
【Java EE 学习 52】【Spring学习第四天】【Spring与JDBC】【JdbcTemplate创建的三种方式】【Spring事务管理】【事务中使用dbutils则回滚失败!!!??】
一.JDBC编程特点 静态代码+动态变量=JDBC编程. 静态代码:比如所有的数据库连接池 都实现了DataSource接口,都实现了Connection接口. 动态变量:用户名.密码.连接的数据库. ...
-
SpringBoot工程创建的三种方式
一. 通过IDEA的spring Initializer创建 1. 打开创建项目面板 File->New->Project->Spring Initializr 2. 填写Maven ...
-
Angular 组件通信的三种方式
我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...
-
(day57)九、多对多创建的三种方式、Forms组件
目录 一.多对多三种创建方式 (一)全自动 (二)纯手撸(基本不用) (三)半自动(推荐使用) 二.forms组件 (一)校验数据 (1)常用内置字段及参数 (2)内置的校验器 (3)HOOK方法 ( ...
-
wpf 创建动画三种方式
动画类型 : 故事版,CompositionTarget,DispachTime 那么到此,三种动态创建动画的方法都已经详细介绍过了,大家可能会有种感觉,比较钟情于第一种WPF/Silverlight ...
-
51、多线程创建的三种方式之实现Callable接口
实现Callable接口创建线程 Callable接口是在jdk5版本中加入的,这个接口在java.util.concurrent包下面,与其他两种方式不同的地方在于使用Callable接口创建的线程 ...
随机推荐
-
DDD领域驱动设计实践篇之如何提取模型
需求说明: 省级用户可以登记国家指标 省级用户和市级用户可以登记指标分解 登记国家指标时,需要录入以下数据:指标批次.文号.面积,这里省略其他数据,下同 登记指标分解时,需要录入以下数据:指标批次.文 ...
-
Jmeter之Bean shell使用(二)
上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...
-
python成长之路11
一.线程: 创建线程有两种方式(本质是一样的,创建好线程之后,cpu调度创建好的线程时执行的其实是Thread的run()方法): import threading def f1(args):prin ...
-
SmokePing 部署实践
1 通过 yum 安装依赖的库以及环境 yum install rrdtool wqy* fping curl bind-utils httpd httpd-devel \ perl perl-FCG ...
-
Linux 之父自传《just for fun》读书笔记
一次偶然的机会,看到了阮一峰老师关于这本书的介绍,当时我就觉得这本书相当有趣. 在没有读这本书之前,我觉得 linus 作为发明 Linux 系统的人,应该是一个比较严肃的人,就像我的老师一样.但事实 ...
-
Java 正则表达式之捕获组
Java 正则表达式之捕获组 1. Java 正则表达式基础 2. Java 正则表达式之捕获组 一.概述 1.1 什么是捕获组 捕获组就是把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显 ...
-
51Nod 1810 连续区间
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1810 题目给出一个1~n的排列,问有多少连续区间.连续区间的定义为区间 ...
-
关于sentinel LDK加密war包实现应用加密的使用方法
经过一周多时间的研究,终于对sentinel产品的使用有个基本的掌握.其中走了不少的弯路,特此记录一下,以备后面回顾. 开发前的用料准备: windows 10 x64位, tomcat7 x64bi ...
-
IScroll的诞生和缺点
转自http://lhdst-163-com.iteye.com/blog/1239784 iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框 ...
-
ASP.NET Core学习指导
ASP.NET Core 学习指导 "工欲善其事必先利其器".我们在做事情之前,总应该做好充分的准备,熟悉自己的工具.就像玩游戏有一些最低配置一样,学习一个新的框架,也需要有一些基 ...