【笔记】ReactNative快速入门笔记
下面是我个人记录的一些笔记,仅供初学者入门参考 预科入门React Native前需要了解一下知识,这样能帮助你更快的掌握RN 环境系统环境要求IOS : 配置所有的技术学习都应该从环境搭建开始,这里也没什么好总结的,最好的方法就是跟着官网指导配置环境
a) JDK1.8+ 测试react-native init RNDemo cd RNDemo react-native run-ios 如果你的虚拟机启动了,那么恭喜你,你的环境已经配置成功! 语法首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性。
直接从代码上讲解新手注意点吧 Hello World传统惯例,入门先行,Hello World 你可以新建一个项目,然后用上面的代码覆盖你的index.ios.js或是index.android.js 文件,然后运行看看。 import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text style={styles.red}>Hello world!</Text> ); } } const styles = StyleSheet.create({ red: { color: 'red',fontWeight: 'bold',} }); // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致 AppRegistry.registerComponent('HelloWorldApp',() => HelloWorldApp); 从语法上看,RN和ReactJS语法区别不大,都是采用JSX和ES6的形式,如果你对ReactJS和ES6不熟悉,建议你先拜读下阮一峰的博文教程:《React 入门实例教程》,《ECMAScript 6 入门》 相较写Web App,区别在于RN的语法引入了原生的组件 import { AppRegistry,Text } from 'react-native'; RN中虽然使用JS写原生UI,但不再使用常规HTML标签 仅仅使用props和基础的View、Text、Image以及TextInput组件,就足以编写各式各样的UI组件了 样式按照JSX的语法要求使用了驼峰命名法:
React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点: <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} /> 事件事件的注册跟ReactJS没什么区别 class MyButton extends Component { _onPressButton() { console.log("You tapped the button!"); } render() { return ( <TouchableHighlight onPress={this._onPressButton}> <Text>Button</Text> </TouchableHighlight> ); } } 此处注册的组件为
常用的事件有:
跨平台
RN并不能算上是真正的跨平台的语言,虽然可以通过打包实现不同平台打包不同组件,但是有些组件需要我们针对不同平台编写不同代码。这就要求我们不用储备一些原生开发的知识。 工作原理
Native模块运行在主线程上(可能会有些独立的后台线程处理运算,当前讨论中可忽略) JS模块运行在JS引擎的JS线程上 Bridge模块Native和JS模块之间不能直接通信,只能通过Bridge做序列化和反序列化,查找模块,调用模块等各种逻辑,最终反应到应用上 性能使用React Native替代基于WebView的框架,使App刷新可以达到每秒60帧(足够流畅),并且能有类似原生App的外观和手感,虽然RN框架已经提供了这个平衡的能力,但平衡点的选择却掌握在开发者手中,即便是Native也无法避免开发方式带来的性能消耗 性能影响原因业务逻辑运行在JS线程上,负责API的调用,事件的处理,状态的更新,而事件的响应UI的变化发生在主线程上,60帧/s的频率要求每一帧的响应处理只有16.67(1000/60)ms,如果超过了16.67ms就会发生丢帧,如果丢帧超过100ms就会产生明显的卡顿现象。所有降低每一帧运算的消耗才能提升性能。 性能影响切面UI事件响应: 性能影响小 常见影响性能的点console,ListView,动画Animated 性能优化经过多年的发展和优化,JS和Native可以在各自的模块线程高效迅速的运行,性能的瓶颈主要在Bridge模块上,尤其是在JS和Native模块间频繁的调用会导致Bridge压力过大,产生卡顿
App高性能开发引导RN的开发并没有一种高质量产出的方法,因为各个项目间有着不同的组件组合,因此只能通过高效的开发方式来尽可能的优化应用。
关于热更新原理1、RN是使用脚本语言来编写的,是的代码可以不用事先编译便可即读即运行 流程
RushyRushy是国内RN团队自主研发的一套热更新包管理平台 Pushy的特点:
社区RN同ReactJS一样,有着强大的社区,从RN版本更新的速度上就可以看出来 google的搜索结果也能说明RN的影响力
开发者需要用到的组件在JS.Coach基本都可以找到。 参考&分享
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |