React: React组件创建的三种方式

时间:2022-01-13 12:42:36

一、简介

在前面介绍的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>  

React: React组件创建的三种方式

方式二: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>

React: React组件创建的三种方式

方式三:无状态函数式组件

它是纯函数而不是组件,因此,它没有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: React组件创建的三种方式

四、组件工厂类

在组件中元素的创建方式基本上都是通过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组件创建的三种方式

五、简化

在上面介绍的React组件创建过程中,不论是使用React.createElement创建元素,还是使用系统工厂类Factory创建元素,都显得不够直接。Facebook团队在React中引入了JSX语法糖来声明元素标签,可以创建复杂的DOM树过程简单化,而且开发者可以很直观的梳理DOM树结构。具体实现,在之前的几篇文章都有讲解,此处就不介绍了。请看这里:https://www.cnblogs.com/XYQ-208910/p/11913238.html

React: React组件创建的三种方式的更多相关文章

  1. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  2. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  3. 于Unity3D动态创建对象和创建Prefab三种方式的原型对象

    于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...

  4. 【Java EE 学习 52】【Spring学习第四天】【Spring与JDBC】【JdbcTemplate创建的三种方式】【Spring事务管理】【事务中使用dbutils则回滚失败!!!??】

    一.JDBC编程特点 静态代码+动态变量=JDBC编程. 静态代码:比如所有的数据库连接池 都实现了DataSource接口,都实现了Connection接口. 动态变量:用户名.密码.连接的数据库. ...

  5. SpringBoot工程创建的三种方式

    一. 通过IDEA的spring Initializer创建 1. 打开创建项目面板 File->New->Project->Spring Initializr 2. 填写Maven ...

  6. Angular 组件通信的三种方式

    我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter和父组件通信 通过serive通信 1. 传递一个组件的引用给另一个组件 Demo1 模板引用变 ...

  7. (day57)九、多对多创建的三种方式、Forms组件

    目录 一.多对多三种创建方式 (一)全自动 (二)纯手撸(基本不用) (三)半自动(推荐使用) 二.forms组件 (一)校验数据 (1)常用内置字段及参数 (2)内置的校验器 (3)HOOK方法 ( ...

  8. wpf 创建动画三种方式

    动画类型 : 故事版,CompositionTarget,DispachTime 那么到此,三种动态创建动画的方法都已经详细介绍过了,大家可能会有种感觉,比较钟情于第一种WPF/Silverlight ...

  9. 51、多线程创建的三种方式之实现Callable接口

    实现Callable接口创建线程 Callable接口是在jdk5版本中加入的,这个接口在java.util.concurrent包下面,与其他两种方式不同的地方在于使用Callable接口创建的线程 ...

随机推荐

  1. DDD领域驱动设计实践篇之如何提取模型

    需求说明: 省级用户可以登记国家指标 省级用户和市级用户可以登记指标分解 登记国家指标时,需要录入以下数据:指标批次.文号.面积,这里省略其他数据,下同 登记指标分解时,需要录入以下数据:指标批次.文 ...

  2. Jmeter之Bean shell使用&lpar;二&rpar;

    上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...

  3. python成长之路11

    一.线程: 创建线程有两种方式(本质是一样的,创建好线程之后,cpu调度创建好的线程时执行的其实是Thread的run()方法): import threading def f1(args):prin ...

  4. SmokePing 部署实践

    1 通过 yum 安装依赖的库以及环境 yum install rrdtool wqy* fping curl bind-utils httpd httpd-devel \ perl perl-FCG ...

  5. Linux 之父自传《just for fun》读书笔记

    一次偶然的机会,看到了阮一峰老师关于这本书的介绍,当时我就觉得这本书相当有趣. 在没有读这本书之前,我觉得 linus 作为发明 Linux 系统的人,应该是一个比较严肃的人,就像我的老师一样.但事实 ...

  6. Java 正则表达式之捕获组

    Java 正则表达式之捕获组 1. Java 正则表达式基础 2. Java 正则表达式之捕获组 一.概述 1.1 什么是捕获组 捕获组就是把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显 ...

  7. 51Nod 1810 连续区间

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1810 题目给出一个1~n的排列,问有多少连续区间.连续区间的定义为区间 ...

  8. 关于sentinel LDK加密war包实现应用加密的使用方法

    经过一周多时间的研究,终于对sentinel产品的使用有个基本的掌握.其中走了不少的弯路,特此记录一下,以备后面回顾. 开发前的用料准备: windows 10 x64位, tomcat7 x64bi ...

  9. IScroll的诞生和缺点

    转自http://lhdst-163-com.iteye.com/blog/1239784 iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框 ...

  10. ASP&period;NET Core学习指导

    ASP.NET Core 学习指导 "工欲善其事必先利其器".我们在做事情之前,总应该做好充分的准备,熟悉自己的工具.就像玩游戏有一些最低配置一样,学习一个新的框架,也需要有一些基 ...