五分钟学习React(六):元素(Element)和组件(Component)
俗话说“万丈高楼平地起”,从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念。在学习React的过程中经常会把Element、Class和Component这几个基础概念混淆。所以我们看看这些React的概念到底是干什么的,有什么作用。
1. 从ReactDOM.render说起
ReactDOM是React封装DOM的一个软件包,提供了DOM的一些特定方法。render方法就是将React element渲染到事先定义的容器中。
// render方法的定义
ReactDOM.render(
element,
container,
[callback]
)
我们可以把render方法理解为React应用的一个入口,这个方法首先通过判断element中虚拟DOM节点的markup是否是大写还是小写,从而建立相应的渲染。小写的虚拟DOM节点的makeup,我们称之为原生DOM元素,常见的如div
、span
等。而大写markup的虚拟DOM节点,我们称之为自定义DOM元素。对于原生DOM元素,render方法会直接创建HTML原生的DOM,而对于自定义的DOM元素,render方法会创建组件来定义。
2. Element的作用
所以简单的说,element就是React实现界面内容的最小单元,它代表了虚拟DOM中的一个对象。它描述了组件实例和DOM节点的关系在React中,通过使用React.createElment可以实现虚拟DOM节点。比如我们定义一个element:
const element = React.createElement(
'h1',
{id: 'myElement'},
'hello there!'
)
当然也可以在元素中嵌套组件,由于这种特性,我们可以用元素来描述DOM节点树。
class myCompnent extends React.Component{
render(){
return (
<h1>hello there!<h1>
)
}
}
const element = React.createElement(
myCompnent,
null,
null
)
3.组件
组件就是一个方法或者一个类,可以接受一定的输入,之后返回一个React 元素。
五分钟学习React(六):元素(Element)和组件(Component)的更多相关文章
- 五分钟学习React(三):纯HTML代码搭建React应用
上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...
- 五分钟学习React(一): 什么是React
在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...
- 五分钟学习React(二):我的第一个Hello World
我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...
- 五分钟学习React(四):什么是JSX
JSX,即javscript XML,是js内定义的一套XML语法.目前是使用babel作为JSX的编译器.这也是在前几期中载入babel的原因. Facebook引入JSX是为了解决前端代码工程复杂 ...
- 五分钟学习React(五):React两种构建应用方式选择
经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...
- 五分钟学习Java8的流编程
1.概述 Java8中在Collection中增加了一个stream()方法,该方法返回一个Stream类型.我们就是用该Stream来进行流编程的: 流与集合不同,流是只有在按需计算的,而集合是已经 ...
- 十分钟学习 react配套的类型检测库——prop-types的运用
js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...
- 正式学习React (六) 项目篇
https://github.com/huenchao/yingshili 或者点这里 注意事项看ReadME.md 会持续更新,反正就是把之前分析的redux react-redux都用一下,然后会 ...
- 照着官方文档学习react
笨人学习法 10000个小时策略来学习,因为笨.先照着官方文档敲一遍,写一遍. 准备 先要准备环境.搭建一个基于webpack的react环境:Hello ReactJS. demo: https:/ ...
随机推荐
- 洛谷——P2574 XOR的艺术
P2574 XOR的艺术 很久之前就想挑战一下这道题了,线段树下传标记的入门题,跟区间加法下传标记类似. #include<bits/stdc++.h> #define N 1000005 ...
- 洛谷——P1757 通天之分组背包
P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...
- CentOS7下安装ELK三件套
ELK用于分布式收集,然后elasticsearch用于分析数据,在Kibana中可以查看数据.报表. 目前公司日志数据量暂时不使用elasticsearch集群,只是用的elasticsearch单 ...
- H5 坑
document.addEventListener("touchmove",function(e){e.preventDefault();},false); 防止滑动时整屏页面移动 ...
- Maven学习总结(5)——聚合与继承
Maven学习总结(五)--聚合与继承 一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 <modules> <module> ...
- GMT,UTC,DST,CST时间详解
全球24个时区的划分 相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究 ...
- [bzoj1251]序列终结者_splay
序列终结者 bzoj-1251 题目大意:给定一个长度为n的正整数序列,支持区间加,区间反转,查询区间最大值.所有元素开始都是0. 注释:$1\le n\le 5\cdot 10^4$,操作个数不多于 ...
- Mac OSX:添加host地址
Mac OSX的hosts文件位于/private/etc/hosts.记得用sudo权限编辑即可.在文件中添加如下内容: xxx.xxx.xxx.xxx (ip地址) abc.com(你的h ...
- Loadrunner | 录制脚本时弹不出IE的解决办法
Loadrunner在录制脚本的时候有时候会遇到弹不出IE的问题,那怎么解决呢?别急,按照以下几个步骤操作,一般就可以解决这个问题. 1. IE浏览器取消勾选[启用第三方浏览器扩展] 启动IE,从[工 ...
- 开源 免费 java CMS - FreeCMS1.8 留言管理
项目地址:http://code.google.com/p/freecms/ 留言管理 管理当前管理网站的留言数据. 1. 回复留言 选择须要回复的留言.然后点击"回复". 注意: ...