ReactJS的简单介绍和使用
一、React的家世背景
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
Facebook的设计理念是独立、小巧、快速、创新,而React的特点也正说明了这一点。
二、React 更“轻”的MDV框架
先来说一下什么是MDV吧,MDV即Model Driven View,根据model动态生成view。MDV框架将程序员从传统手动渲染dom节点和事件绑定中解放了出来,大大提高了开发效率。
React更“轻”,这个"更"是有对比含义的,相对于AngularJs的双向数据流,ReactJs的单向数据流显然是更轻量级,而且React维护自己的VTree(虚拟Dom树),可以更快的渲染dom节点。据说,react渲染的界面,fps可以保持在60左右,这一点使得react特别适合于制作游戏。在react刚推出的时候,有测试指出react的性能要比angular高20%左右。
但是,AngularJs的数据交互可以双向进行,可以用于CURD,应用易于接受用户的自定义以及个人数据。当然, 毕竟 React是用于“render”的,view中最关键的是管理组件状态变化,而React在这一点上做的比AngularJs好很多。
在React中,对象的状态使用this.state表示,对象的初始状态设置使用getInitialState,设置状态使用setState,数据使用props管理,DOM操作和事件监听则类似于jquery。
三、使用React制作简易悬浮框
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container"></div>
<div id="layer"></div>
</body>
<script type="text/javascript" src="ReactJs/react.min.js"></script>
<script type="text/javascript" src="ReactJs/react-dom.min.js"></script>
<script type="text/javascript" src="ReactJs/browser.min.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/babel" src="js/common.js"></script>
</html>
style.css
#modal{
width:400px;
height:210px;
margin-left: auto;
margin-right: auto;
padding-left:10px;
padding-right:10px;
border:1px solid #999;
border-radius: 10px;
background-color: #fff;
display:none;
}
#modal .btn{
float:right;
margin-right:10px;
}
#layer{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:-1;
}
common.js (React创建组件)
var BootstrapButton=React.createClass({
render:function(){
return (
<a {...this.props}
href="javascript:;"
role="button"
className={'btn '+this.props.className}/>
);
}
});
var BootstrapModal=React.createClass({
render:function(){
return (
<div id="modal" ref="root">
<h1>Hello world</h1>
<hr/>
<p>This is a test!</p>
<hr/>
<BootstrapButton className="btn-primary" onClick={this.handleConfirm}>
Confirm
</BootstrapButton>
</div>
);
},
handleConfirm:function(){
this.close();
},
open:function(){
$(this.refs.root).show();
$("#layer").css("background","rgba(112,112,112,0.6)");
},
close:function(){
$(this.refs.root).hide();
$("#layer").css("background","rgba(0,0,0,0)");
}
});
var ModalWidget=React.createClass({
render:function(){
return(
<div>
<BootstrapButton className="btn-default" onClick={this.showModal}>
show
</BootstrapButton>
<BootstrapModal ref="modal">
</BootstrapModal>
</div>
);
},
showModal:function(){
{this.refs.modal.open()};
}
});
ReactDOM.render(<ModalWidget/>,$("#container")[0]);
- Stanford机器学习笔记-3.Bayesian statistics and Regularization
- 在R中使用支持向量机(SVM)进行数据挖掘
- 【你问我答】你与Java大牛的距离,只差这24个问题
- Android漏洞扫描工具Code Arbiter
- Huawei HG532 系列路由器远程命令执行漏洞分析
- postMessage与postMessage跨域
- 【手把手教你做项目】自然语言处理:单词抽取/统计
- D-Link系列路由器漏洞挖掘入门
- 大家一直在谈的领域驱动设计(DDD),我们在互联网业务系统是这么实践的
- 在Atom中设置Python开发环境
- Kaggle赛题解析:逻辑回归预测模型实现
- Shield:支撑美团点评品类最丰富业务的移动端模块化框架开源了
- 点击块,让小块动起来 - 函数封装
- 玩玩文本挖掘-wordcloud、主题模型与文本分类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现向本地写入一个XML文件和解析XML文件
- Android自定义View实现带4圆角或者2圆角的效果
- Android 在 res/layout 文件夹 下创建一个 子文件夹实例
- Android开发实现TextView超链接5种方式源码实例
- Android根据包名停止其他应用程序的方法
- Android APP存活检测方式
- 利用Android两行代码真正杀死你的App
- android判断应用是否已经启动的实例
- 解决android studio引用远程仓库下载慢(JCenter下载慢)
- 在Android中查看当前Activity是否销毁的操作
- Android 7.0 运行时权限弹窗问题的解决
- Android加密之全盘加密详解
- Android 实现彻底退出自己APP 并杀掉所有相关的进程
- 使用Android开发接入第三方原生SDK实现微信登录
- Android打包篇:Android Studio将代码打包成jar包教程