【每天半小时学框架】——React.js的模板语法与组件概念
React 是一个用于构建[用户界面]的 JAVASCRIPT 库,t主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
二、React有哪些 特点?
● 1.声明式设计 −React采用声明范式,可以轻松描述应用。
● 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。--虚拟DOM结构
● 3.灵活 −React可以与已知的库或框架很好地配合。
● 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
● 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
● 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单
三、简单的解释几个概念:
① 虚拟DOM(Virtual DOM)机制:对于每一个组件,React会在内存中构建一个相对应的DOM树,
基于React开发时所有的DOM构造都是通过虚拟DOM进行,每当组件的状态发生变化时,React都会重新构建整个DOM数据。
然后将当前的整个DOM树和上一次的DOM树进行对比,得出DOM结构变化的部分(Patchs),然后将这些Patchs再更新到
真实DOM中。
优点:避免了当页面数据发生变化时,DOM也被全部更新一遍并进行重新渲染。
整个过程都是在内存中进行,减少了不必要的性能开销,因此是非常高效的。
② JSX语法:
定义:JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法。
React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化。
特点:
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词,如for和class。需要替换成htmlFor和className
6、HTML语言直接写在 JavaScript 语言之中,不加任何引号,它允许 HTML 与 JavaScript 的混写.。
优点:
1、JSX 执行更快。
2、它是类型安全的,在编译过程中就能发现错误。
3、使用 JSX 编写模板更加简单快速。
③ JSX 的基本语法规则:
遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
遇到代码块(以 { 开头),就用 JavaScript 规则解析;
四、 React.js/Angular.js/Vue.js的对比
1、数据流(数据绑定)
① Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
② Vue 也支持双向绑定,默认为单向绑定,数据从父组件单向传给子组件。
③ React推崇的是函数式编程和单向数据流
即给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
2、视图渲染
① AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入
(NG框架是在DOM加载完成之后, 才开始起作用的)
② React 的渲染建立在 Virtual DOM 上,一种在内存中描述 DOM 树状态的数据结构。
当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁。
③ Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。
3、模块化与组件化
① Angular 依赖注入来解决模块之间的依赖问题
② Vue.js 指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑操作。
③ React构建于组件之上,重要属性props,state。一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。
4、语法与代码风格
①Angular 2 依然保留以 HTML 为中心。Angular 2 将 “JS” 嵌入 HTML。
② Vue.js Vue 也是以 HTML 为中心,将 “JS” 嵌入 HTML,但是进阶之后推荐的是使用 webpack + vue-loader 的单文件组件格式。
③ React 推荐的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整进 JavaScript
二、React.js的模板语法
一、文件导入
<script src="js/react.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/react-dom.js"></script>
这里需要注意的是这三个文件必须首先加载!并且react.j文件要放在最前面进行导入! react.js是react.js的核心库。 react-dom.js提供与DOM相关的功能。而 browser.js是将JSX语法转化为JAVASCRIPT语法。
二、模板语法
之后创建script标签,我们的核心JSX语法就写在标签内部:
这里需要注意的地方是:<script> 标签的 type 属性为 text/babel 。凡是使用 JSX 的地方,都要加上 type="text/babel" 。
tips: 在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后,这个依赖的库改为browser.js。 页面script标签的type也由text/jsx改为text/babel。
接下来我们写一个简单的小案例,利用React.js打印输出语句,代码如下:
<script type="text/babel">
/*一、基本结构:
ReactDOM.render() 是react中的最基本的方法,作用是将模板转为HTML语言,并将其插入到DOM节点中。
*/
ReactDOM.render(//render:渲染的意思
<h1>你好,React!</h1>,
//必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点;
document.getElementById("example1")
)
</script>
使用上面语句就可以打印输出语句“你好,React!”,这就实现了简单的案例。
接下来我们介绍一下,React.js中的CSS样式书写方式,与原生分离式写法有很大不同:
① React 推荐使用内联样式!(使用小驼峰法则)
② React 会在指定元素数字后自动添加 px 。
<script type="text/babel">
var myStyle ={ //传入一个样式数组
fontSize: 100,
color: 'red'
};
var testStyle ={
width:800,
heigth:500,
backgroundColor:"yellow"
};
ReactDOM.render(
<div style = {testStyle}>
<h1 style = {myStyle}>这段文字使用了内联样式</h1>
</div>,
document.getElementById('example')
)
</script>
显示效果如下:
接下来我们在模板插入 JavaScript 变量,以数组为例,看一下会是什么效果?
<script type="text/babel">
var arr = [
<h1 key="1">这是数组元素1</h1>,
<h2 key="2">这是数组元素2</h2>,
<h3 key="3">这是数组元素3</h3>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example")
) </script>
代码的运行结果如下:
以上我们可以看到JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员。
一、什么是组件?
组件化思想在React.js中很重要,eact 允许将代码封装成组件,然后像插入普通 HTML标签一样,在网页中插入这个组件。
二、组件的创建以及输出
创建:
var HelloMessage = React.createClass({
render:function (){
return
}
})
输出:使用伪标签 实例化组件类并输出信息 <HelloMessage />
下面我们创建一个组件来实现一个简单的功能:
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>这是一个自定义组件---{this.props.name}---{this.props.age}</h1>
// <p>这是个测试标签</p>;
}
});
//输出组件
ReactDOM.render(
<HelloMessage name = "这是组件的name属性!" age = "这是组件的age属性!"/>,
//在调用组件的时候,如果想要多次调用组件,也需要给组件设置一个根标签
<div>
<HelloMessage name="这是组件的name属性!" />
<HelloMessage age="这是组件的age属性!" />
</div>,
document.getElementById('example')
);
</script>
上面代码运行结果如下:
在上述代码中,如果我们将 <p>这是个测试标签</p> 放开控制台会报错如下:
原因是因为组件类只能包含一个顶层标签(根标签),可以嵌套标签例如我们可以将上述组件类写成如下格式:
var HelloMessage = React.createClass({
render: function() {
return <h1>
这是一个自定义组件---{this.props.name}---{this.props.age}
<p>这是个测试标签</p>
</h1>
}
});
运行时就不会再报错,结果如下所示:
在声明与调用组件的时候我们需要注意以下几点:
注意:
① 自定义的 React组件类名以大写字母开头,使用大驼峰法则命名!
② 所有的组件都必须拥有自己的render!
③ 组件类只能包含一个顶层标签(根标签),可以嵌套标签!
④ 组件可以任意加入属性,其属性属可以在组件类的 this.props.对象上获取。(组件的所有子节点)
Tips: 在添加属性时,
class 属性需要写成 className ,
for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字
复合组件:创建多个组件来合成一个组件,即把父组件的不同功能点进行分离
<script type="text/babel">
var BaseModule = React.createClass({
render:function(){
return(
<div>
<Module title={this.props.title} />
{/* <h2>作品:{this.props.title}</h2>*/}
<p>作者:{this.props.author}</p>
</div>
)
}
});
var Module = React.createClass({
render:function(){
return(
<h2>{this.props.title}</h2>
)
}
});
ReactDOM.render(
<BaseModule title="围城" author="钱钟书" />,
document.getElementById('container')
);
</script>
上述复合组件运行结果如下:
好了。第一篇React的介绍就先这么多了,通过这些实例我们也大致了解了React所谓混写的概念以及其便捷性,和Vue等框架孰优孰劣现在还不能太早下定论,在以后的几篇文章里我们将会更深一步的了解下它们的异同再做比较。
【每天半小时学框架】——React.js的模板语法与组件概念的更多相关文章
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- Flask框架 请求与响应 & 模板语法
目录 Flask框架 请求与响应 & 模板语法 简单了解Flask框架 Flask 框架 与 Django 框架对比 简单使用Flask提供服务 Flask 中的 Response(响应) F ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- React.js 小书 Lesson2 - 前端组件化(一):从一个简单的例子讲起
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson2 转载请注明出处,保留原文链接和作者信息. 很多课程一上来就给大家如何配置环境.怎么写 Re ...
- React.js 小书 Lesson11 - 配置组件的 props
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson11 转载请注明出处,保留原文链接和作者信息. 组件是相互独立.可复用的单元,一个组件可能在不 ...
- react系列(一)JSX语法、组件概念、生命周期介绍
JSX React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号.JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖. JSX的 ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Django框架(五) Django之模板语法
什么是模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板 模板语法分类 模板语法之变量:语法为 {{ 变量名 }}: 在 Django 模板中遍历复杂数据结构的关键是句点字 ...
- 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制
****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...
随机推荐
- Dubbo与Zookeeper、SpringMVC整合和使用
作为dubbo框架初学者,能让框架跑起来非常不容易,非常感谢网上诸多大神提供的文章,本人参考文章地址是:https://my.oschina.net/xshuai/blog/891281 不过别人的记 ...
- JDFS:一款分布式文件管理系统,第四篇(流式云存储续篇)
一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...
- Redisson分布式锁的简单使用
一:前言 我在实际环境中遇到了这样一种问题,分布式生成id的问题!因为业务逻辑的问题,我有个生成id的方法,是根据业务标识+id当做唯一的值! 而uuid是递增生成的,从1开始一直递增,那么在同一台机 ...
- QT_FORWARD_DECLARE_CLASS
相当于class 类名. 那么他和#include 包含头文件有什么区别呢 首先我们为什么要包括头文件问题的回答很简单通常是我们需要获得某个类型的定义(definition).那么接下来的问题 ...
- crontab的两大坑:百分号和环境变量
今天想给服务器加个自动备份mysql数据库的功能(别怪我这么久才加,阿里云每天全盘备份的,不怕丢数据库),本以为只要5分钟就能搞定的,结果入了两个大坑. 我的crontab是这样写的: * * * m ...
- Linux入门之常用命令(8)上传下载
[什么是rz/sz (lsz/lrz)] 简单说就是,可以很方便地用这两个sz/rz工具,实现Linux下和Windows之间的文件传输(发送和接收),速度大概为10KB/s,适合中小文件.rz/s ...
- httpd2.2配置文件详解
httpd2.2官方配置手册:http://httpd.apache.org/docs/2.2/ 注意:关闭防火墙,iptables规则 vim /etc/sysconfig/selinux SELI ...
- Codeforces Round #425 (Div. 2)C
题目连接:http://codeforces.com/contest/832/problem/C C. Strange Radiation time limit per test 3 seconds ...
- [mysql]ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value 解决方法
在MySQL数据库中的mysql.user表中使用insert语句添加新用户时,可能会出现以下错误: ERROR 1364 (HY000): Field 'ssl_cipher' doesn't ha ...
- zoj 2022
分析: 组合数学类型的题目. 正常的话可能会去分解1~N数里面有几个5和2,但是这样的复杂度为O(nlogn). 其实有更巧妙的办法,可以把问题分解成子问题. 可以发现N!末尾的0与1~N中有几个5的 ...