很久没回来这里发博客了。
最近在学react-native,感觉很必要沉淀一下相关的知识,所以写一编关于react-native 的简介的博文。
React-native是什么
1、它在 JavaScript中使用React 抽象操作系统原生的 UI 组件,代替DOM 元素来渲染等等。
2、ReactNative 使你能够使用基于JavaScript 和React ,在本地平台上构建世界一流的应用程序体验。
3、开发者只需学习一种语言就能轻易为任何平台高效地编写代码。
4、提高多平台开发的开发效率—— 仅需学习一次,编写任何平台。(Learnonce,write anywhere)
React-native的工作原理
在页面渲染上,它是使用JavaScript抽象原生的UI组件来进行渲染的。
在通讯上,React Native运行在主线程之外,在另一个专门的后台线程里运行JavaScript引擎,两个线程之间通过异步消息协议来通信。
在UI方面,React Native提供了一个跨平台、类似FlexBox的布局系统,并且还支持CSS子集。它支持用JSX、JavaScript、CoffeeScript和TypeScript来开发。
的机制特性
1.原生组件的使用
使用ReactNative,你可以使用标准的平台组件。
例如iOS的UITabBar或安卓的Drawer。这使你的app获得平台一致的视觉效果和体验,并且获得最佳的性能和流畅性。 使用对应的Reactcomponent,就可以轻松地把这些原生组件整合到你的ReactNative应用中,例如TabBarIOS和DrawerLayoutAndroid。
2.异步执行
在Javascript代码和原生平台之间的所有操作都是异步执行的,并且原生模块还可以根据需要创建新的线程。
Javascript和原生代码之间的通讯是完全可序列化的,这使得我们可以借助Chrome开发者工具去调试应用,而不论应用运行在模拟器还是真机上。
ReactNative 的语言是基于JavaScript,这必然会使得代码可以从服务器端动态更新成为可能。更新代码方便快捷,提交一个js到服务端就能在app体现。
上图就是通过谷歌浏览器来调试模拟器上面的app
3.触摸事件处理
ReactNative实现了一个强大的触摸事件处理系统,可以在复杂的View层次关系下正确地处理触摸事件。
同时还提供了高度封装的组件如TouchableHighlight等,可以直接嵌入到ScrollView或者其它的元素中,无需额外配置。
4.弹性布局和样式
ReactNative使用了弹性布局flexBox的原理,控制view的布局应当简单易行。
同时还提供了简洁的样式组件给开发者使用。
5.兼容和可扩展性
ReactNative吸纳了web生态系统中的通用标准,并提供了不少API的兼容层。
扩展性方面,使用ReactNative,无需编写一行原生代码即可创造一款不错的app。
同时,自定义的原生视图和模块来扩展ReactNative也非常容易。
的优缺点
优点
1.更新方便,无需多次编译,只需要更新服务端的js。
2.布局代码简单,对于前端来说入门成本低。
3.css-layout,能通过类似css的方式进行布局。
4.异步执行,调试方便。
5.点按操作抽象成组件,机制完善。
6.不用Webview,摆脱了Webview让人不爽的交互和性能问题。
缺点
1.组件必须依赖原生的组件和方法。
2.外壳是react,入门成本高。
3.从Native到Web,要做很多概念转换,造成双方都要妥协。布局相对还是麻烦,有待优化。
4.样式组件是阉割版的css,还不够好用。
对的看法
1.目前react-native在国内还是相对较新的技术
2.各大小公司都开始投人去研究这个黑科技的框架
3.有一定的入门门槛,到处是坑
4.资料和demo都很少,需要自己好好去研究
5.以后会是一个很有前景的框架,值得学习使用
学习资料
•https://facebook.github.io/react-native/
•http://reactnative.cn/
•http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html
•https://js.coach/react-native
•http://www.lcode.org/
•@L_301_10@www.open-open.com/lib/view/open1460814875809.html
Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败,只有没到的成功。
博主相关文章推荐:
身为前端仔,你竟然不会用fiddler?!
你有想过30几岁后的前端路吗
这些年帮过我的前端框架(实用篇)
移动端上下滑动事件之--坑爹的touch.js
轻轻谈一下seaJs——模块化开发的利器