初识React
是Facebook开源的一个用于构建用户界面的Javascript库，已经 应用于Facebook及旗下Instagram
React专注于MVC架构中的V，即视图
React引入了 虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上
在引入React库之后，开发API就通过React对象暴露出来了，我们要做的就是
在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。
- createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素
type用来指定要创建的元素类型
props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等
children开始的所有参数，都被认为是这个元素的子元素
var el = React.createElement(
"ul",
null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
React.createElement("li",null,"Korea")
);
- render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上
element是使用createElement()方法创建的React元素
container是真实DOM中的HTML元素，作为渲染的目标容器
callback参数是可选的函数，当渲染完成或更新后被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First</title>
<!--.引入React库-->
<script src="lib/react.min.js"></script>
</head>
<body>
<!--.在真实DOM上定义容器-->
<div id="content"></div>
<script>
//3.在虚拟DOM上创建p元素
var el = React.createElement(
"ul",
null,
React.createElement("li",null,"aa"),
React.createElement("li",null,"bb"),
React.createElement("li",null,"cc")
);
//4.将虚拟DOM上的ul元素渲染到真实DOM上的#content容器
React.render(el,document.querySelector("#content"));
</script>
</body>
</html>
Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用。有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台。
React组件就是一个 实现预定义接口的JavaScript类：
React.createClass(meta)
meta是一个实现预定义接口的JavaScript对象
在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素
如果组件是由多个元素构成的，那么必须在外边包一个顶层 元素，然后返回这个顶层元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LED Display</title>
<script src="lib/react.min.js"></script>
<!--组件样式-->
<style>
@font-face {
font-family:"LED";
src:url("font/LED.eot?") format("eot"),
url("font/LED.woff") format("woff"),
url("font/LED.ttf") format("truetype"),
url("font/LED.svg#LED") format("svg");
font-weight:normal;
font-style:normal;
}
.ez-led{
font-family : "LED";
font-size : 40px;
background : #70d355;
width: 500px;
height:60px;
display:block;
line-height : 60px;
text-align : right;
padding : 10px;
letter-spacing:5px;
margin-top:20px;
}
</style>
</head>
<body>
<!--定义容器-->
<div id="content"></div>
<script>
//定义React组件
var EzLedComp = React.createClass({
//每个React组件都应该事先render()方法
render : function(){
var e = React.createElement(
"div",
null,
React.createElement("div",{className : "ez-led"},"Hello, React111!"),
React.createElement("div",{className : "ez-led"},"Hello, React222!")
);
//render()方法应该返回一个React元素
return e;
}
});
//创建React元素
var el = React.createElement(EzLedComp);
//渲染
React.render(el,document.querySelector("#content"));
</script>
</body>
</html>
React引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义 变得相当繁琐,于是JSX来了
JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素
- 指定脚本类型
<script type="text/jsx">...</script>
//外部脚本
<script src="a.js" type="text/jsx"></script>
- 引入JSX语法转换库
<script src="lib/JSXTransformer.js"></script>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LED Display-in JSX</title>
<!--引入React库-->
<script src="lib/react.min.js"></script>
<!--引入JSX转换库-->
<script src="lib/JSXTransformer.js"></script>
<!--组件样式-->
<style>
@font-face {
font-family:"LED";
src:url("font/LED.eot?") format("eot"),
url("font/LED.woff") format("woff"),
url("font/LED.ttf") format("truetype"),
url("font/LED.svg#LED") format("svg");
font-weight:normal;
font-style:normal;
}
.ez-led{
font-family : "LED";
font-size : 40px;
background : #70d355;
width: 300px;
height:60px;
line-height : 60px;
text-align : right;
padding : 10px;
letter-spacing:5px;
}
</style>
</head>
<body>
<!--定义容器-->
<div id="content"></div> <!--声明脚本类型为JSX-->
<script type="text/jsx"> //定义React组件
var EzLedComp = React.createClass({
//每个React组件都应该事先render()方法
render : function(){
var e =
//JSX-->
<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led"></div>
<div className="ez-led"></div>
</div>;
//<--JSX
return e;
}
});
//渲染
React.render(
<EzLedComp/> , //JSX
document.querySelector("#content"));
</script>
</body>
</html>
初识React的更多相关文章
- 初识React Native，踩坑之旅....
开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...
- 初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...
- React组件开发（一）初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
- 初识React：使用React完成Hello World程序
正式学习React之前,通过一个简单的Hello Word程序来感受一下. <!DOCTYPE html> <html lang="zh-cn"> < ...
- 【React】初识React
React是什么 React是如今(2015年)最热门的前端技术. 在React中.一切皆组件. A JavaScript library for building user interfaces R ...
- 初识react中的状态量
react组件中的两类状态数据:props,state,官网API给出的使用规范,多读几遍,受益匪浅: 结论: 1. 对应任何可变的数据,理应只有一个单一“ 数据源 ” 2. 如果多个组件均需要这些数 ...
- 初识react native遇到的问题
Andriod 使用react native时遇到的问题 打开现有项目报错: 从第一行Error可以知道是一个zip的压缩文件打不开,往下看应该是下载的Gradle文件有问题,提示也是让从新下 ...
- 前端笔记之React（一）初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- 初识react中高阶组件
高阶组件并不是一个组件,而是一个函数 这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...
随机推荐
- poj 3264
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 44594 Accepted: 20931 ...
- html代码中显示系统时间
可以显示系统的静态时间和动态时间 1,静态时间 <script type="text/javascript"> var myDate = new Date(); doc ...
- Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）
使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运 ...
- ios蓝牙开发（三）ios连接外设的代码实现：手机app去读写蓝牙设备。
手机app去读写蓝牙设备....... 代码下载: 原文博客主提供Github代码连接,地址是:https://github.com/coolnameismy/demo ios连接外设的代码实现流程: ...
- Tomcat 内存溢出对应解决方式
1.Tomcat内存溢出的原因 生产环境中Tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一样的,当然处理方式也不一样. 这里根据平时遇到的情况和相关资料进行一个总结.常见的一般会有下面三 ...
- 套用GGTalk做项目的经验总结——GGTalk源码详解系列（一）
坦白讲,我们公司其实没啥技术实力,之所以还能不断接到各种项目,全凭我们老板神通广大!要知道他每次的饭局上可都是些什么人物! 但是项目接下一大把,就凭咱哥儿几个的水平,想要独立自主.保质保量保期地一个个 ...
- Java：泛型
一.序言 变化一: 在引入范型之前,Java中的类型分为原始类型.复杂类型,其中复杂类型分为数组和类:引入范型后,一个复杂类型可以细分成更多的类型. 例如,原先的List类型,现在细分成List< ...
- iis7配置网站容易出现的问题（转）
来源: http://www.cnblogs.com/5426z/articles/4865022.html 1.64位操作系统 access数据库提示:未在本地计算机上注册"Microso ...
- jQuery升级踩坑大全
jQuery升级踩坑大全 背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到j ...
- 项目分享五：H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...