React Native 开发之 (06) JSX
一 React
1 React定义
React的GitHub地址是 https://github.com/facebook/react。它的官方介绍是 A JavaScript Library for Building user interfaces.可以看出React提出的是一个新的开发模式和理念，它强调的"用户界面".
2. React 特点
React主要有3个特点：
1) 作为UI (Just the UI).
React只是作为视图(View)在MVC 中使用，
2) 虚拟DOM(Virual Dom )
这是React 的一个亮点，可以很好的优化视图的渲染和刷新。虚拟DOM是React最重要的一个特性。
以前跟新视图时，需要先清空DOM容器的内容，然后将最新的DOM和数据追加到容器中，现在React将这已操作放进了内存。React认为内存的操作远比视图全部更新来的高效。
随着浏览器的迭代，内存比视图刷新更新来的高效。
虚拟DOM的比较，计算出最小更新的视图，然后将差异部分更新放进内存进行比较已完成整个组件的渲染，这就是React如此高效的原因。
3) 数据流(Data Flow)
React实现了单向的数据流，相对于传统的数据绑定而言，React更加高效，便捷。
3 学习React需要掌握的知识
现在我们对React有了初步的了解，学习React还需要掌握以下的知识。
- JSX语法知识
- ES6相关知识
- 前端基础知识
二 React 例子
开发的IDE可以选择 webStrom , sublineText ,Atom .网上有很多React的例子可以参考， 更多 React 例子可以参考 React Demos 。
1 简单组件和数据传递
使用 this.props来做简单的数据传递，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script> </head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage name="xinping" />,
document.getElementById("example")
);
</script> </body>
</html>
上面的代码主要做了两件事情：
1）使用React.createClass定义了一个组件HelloMessage。HelloMessage可以传入name属性，同时可以讲内容用h1标签渲染。
2）使用React.render方法将组件渲染到id为example的div内。render方法有两个参数，第一个参数就是要渲染的组件内容，第二个就是要渲染到的目标节点。
打开Chrome浏览器，可以看到如下效果，打开Chrome console工具，看到渲染后的文档内容如下图所示。
2 非DOM属性
在JSX中存在3个特殊：key、ref、dangerouslySetInnerHTML
1）键（key）：
可以是一个可选的唯一标识符。在程序运行的过程中，一个组件可能会在组件树中调整位置，比如当前用户在进行所有操作时，或者当一个列表中的物品被增加、删除时。这种情况下组件可能不需要被销毁并重新创建。
通过给组件设置唯一的key。确保渲染周期内保持一致，使React能够更智能的决定应该重用一个组件，还是销毁并重新创建一个组件，今儿提升渲染的性能，当两个已经存在DOM中的组建交换位置时，可以不用重新渲染DOM而是移动。
2）引用（ref）：
ref允许父组件在render方法之外保持对子组件的一个引用。
在jSX中，可以通过属性中设置期望的引用名定义一个引用。例如：
render：function（）{
return <div><input ref='myInput'.../></dib>
}
然后，你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了。通过或者这个对象呗成为支持实例。并不是真的DOM，而是React在需要的是有用来穿件DOM的一个描述对象。可以使用this.refs.myInput.getDOMNode()访问真实的DOM节点。
3）设置原始的HTML(dangerouslySetInnerHTML)
有时候需要将HTML内容设置为字符串，尤其是使用通过字符串操作DOM的第三方库时，为了提升React的互操作性，这个属性允许你使用HTML字符串，然而如果你可以避免使用的话那就尽量不要使用。要使用这个作用要把字符串设置到逐渐为html_的对象里，像这样：
render：function（）{
var htmlString={
_html:"<span>an htmlstring</span>“
}；
return <div dangerouslySetInnerHTML={htmString}</div>
}
综合例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script> </head>
<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
console.log( this.refs.myTextInput.value )
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Clicke Me" onClick={this.handleClick} />
</div>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script> </body>
</html>
资料参考：
http://sowm.cn/css88/article/q6fiAf.html
http://www.cocoachina.com/webapp/20150721/12692.html
https://github.com/ruanyf/react-demos
React Native 开发之 (06) JSX的更多相关文章
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- DECO 一个REACT NAtive 开发IDE工具
DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...
- React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE
Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...
- React Native 开发笔记
ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...
- 【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
- React Native开发的通讯录应用
React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...
随机推荐
- Nodejs进阶：如何将图片转成datauri嵌入到网页中去
问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:"nodejs读取图片,转成base64,怎么读取呢?" 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即 ...
- nodejs学习之实现简易路由
此前实现了个数据转发功能,但是要建本地服务器,还需要一个简易的路由功能.因为只是用于本地服务器用于自己测试用,所以不需要太完善的路由功能,所以也就不去使用express框架,而是自己实现一个简易路由, ...
- 初用protobuf-csharp-port
下面这个用法是参照protobuf-csharp-port的官方wiki,参见: https://code.google.com/p/protobuf-csharp-port/wiki/Getting ...
- 【转】关于Class.forName(“com.mysql.jdbc.Driver”)
原文:http://www.cnblogs.com/gaojing/archive/2012/03/23/2413638.html 传统的使用jdbc来访问数据库的流程为: Class.forName ...
- Swift&NodeJS 使用Alamofire进行Post(zhuan)
这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...
- 解决"415 Cannot process the message because the content type 'application/x-www-form-urlencoded' was not the expected type 'text/xml; charset=utf-8'"
wcf basicHttpBinding content-type text/xml;charset=utf-8 wsHttpBinding 'application/soap+xml; ch ...
- Android四大组件之Activity详解——创建和启动Activity
前面我们已经对Activity有过简单的介绍: Android开发——初始Activity Android开发——响应用户事件 Android开发——Activity生命周期 先来看一下最终结果 项目 ...
- QMenu，contextmenuevent，窗体透明
void MainWindow::contextMenuEvent(QContextMenuEvent *event) { QMenu *menu=newQMenu; menu->addActi ...
- 开发错误11：Configuration with name ‘default’ not found
开发错误11:Configuration with name 'default' not found 今天在导入一个sdkdemoapp3.0项目时,发现project build.gradle 与m ...
- jsp内置对象作业1-用户登录
题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...