React Native
- 什么是
React Native,它能做什么- 使用
React Native开发跟我们原生应用相比较优势在哪里- 使用RN进行开发需要用到的只是都有哪些
React
React 是一套可以用简洁的语法高效绘制 DOM 的框架
- 所谓的“高效”，是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM,当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM。
- React只是前端开发过程中的专注于UI部分的框架,对应到 MVC 结构中就是 View 层。要想实现完整的 MVC 架构，还需要 Model 和 Controller 的结构。在前端开发时，我们可以采用 Flux 和 Redux 架构，这两个架构我目前还么接触过
- 对于React的学习可以到React官方网站或者阮一峰老师的技术博客进行深入学习
什么是React Native
一句话概括rn就是一个基于 JavaScript，具备动态配置能力，面向前端开发者的移动端开发框架, 它的宗旨是让前端开发者像用 React 写网页那样，用 React Native 写移动端应用。宗旨:Learn once，Write anywhere!,
React Native 希望前端开发者学习完 React 后，能够用同样的语法、工具等，分别开发安卓和 iOS 平台的应用并且不用一行原生代码。
使用rn编程的好处:
无需编译
利用了React里面的分层和DOM diff机制,减少重复渲染
相比于原生平台，开发速度更快，支持热更新,相比于 Hybrid 框架，性能更好。
缺点
做不到 Write once, Run everywhere，也就是说开发者依然需要为 iOS 和 Android 平台提供两套不同的代码，比如参考官方文档可以发现不少组件和API都区分了 Android 和 iOS 版本。即使是共用组件，也会有平台独享的函数。
学习成本高
JSX语法
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
JavaScript
- 要想熟练使用RN,javascript语法是必须熟悉的,建议先到 W3School上花几分钟时间快速地浏览一遍语法,然后在开发过程中遇到具体生疏语法的时候再仔细查看.
javascript中的Promise用法
在rn的网络请求中常用的
fetch方法发送http请求,fetch方法会返回一个promise类型的对象,所有对于我们js的初学者应该理解这个对象
-
Promise在js中的使用类似OC中的block,但是实质却不同于block,可以理解为一个封装了两个block的特殊的对象.主要用于解决异步方法完成后的回调,Promise允许我们将一个执行异步操作
React Native component
- React 允许将代码封装成组件（component），在rn中建议将具体小的UI组件都进行封装以便以后的复用.
React.createClass方法就用于生成一个组件类,当然这是ES5中的语法规范,ES6之后的规范如下export default class ChoiceOptionView extends Component,ES5和ES6语法上发生了很大变化,但是对于我们来说直接上手使用最新的ES6以上的语法更好,不过在看示例代码或者开源项目中的时候有很多旧的语法样式,使我们感到疑惑,这里有一份ES5和ES6之间语法上的差异对照 - 对于component的学习应该放在重点,以后的开发主要是面向组件开发
- 在平时开发中
View,Text,Image,学会了就可以进行简单的界面编写了,建议稍微过一下官网的教程就开始上手写,写到哪儿查到那儿. - component的学习要点大概分为
props_& _state- component的生命周期
- 布局!!!
属性&style
props和 state
props
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
state
React靠一个state来维护状态，当state发生变化则更新DOM。控制一个组件，一般有两种数据类型，一种是props，一种是state。props是在父组件中设置，一旦指定，它的生命周期是不可以改变的。对于组件中数据的变化，我们是通过state来控制的。一般情况下，我们初始化state状态，是在construcor构造函数中，然后如果需要改变时，我们可以调用setState方法。
一句话区分state和props就是: 外界传递过来的一般不会发生变化的属性成为props,组建内部用来控制组件更新的属性成为state
生命周期方法
初始化方法
//这里一定要调用super的方法,这里还能拿到外界传递过来的props
constructor(props) {
super(props)
}
> 组件加载方法
* componentWillMount\(\)
* 会在组件render之前执行，并且永远都只执行一次。
* componentDidMount\(\)
* 这个方法会在组件加载完毕之后,render之前执行。在这个时候之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode\(\)来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中执行setTimeout, setInterval或者发送AJAX请求等操作\(防止异部操作阻塞UI\)。
> 组件更新:
* componentWillReceiveProps\(\)
* 在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。这个方法很少用到,只有当组件内部的状态映射于外界传递的属性的时候使用,一般我们通过回调可以实现外界的对该组件的控制
* shouldComponentUpdate\(\)
* `boolean shouldComponentUpdate(object nextProps, object nextState)`,返回一个布尔值。在组件接收到新的props或者state时被执行。在初始化时或者使用forceUpdate时不被执行,可以在你确认不需要更新组件时使用,注意:** 如果shouldComponentUpdate返回false, render\(\)则会在下一个state change之前被完全跳过。\(另外componentWillUpdate和 componentDidUpdate也不会被执行\),使用这个方法可以在特殊情况下提高组件的性能**
* componentWillUpdate\(\)
* 在组件接收到新的state但还没有render时被执行。在初始化时不会被执行。
一般用在组件发生更新之前。
* componentDidUpdate\(\)
* 在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除notification文字等操作
> 组件销毁
* componentWillUnmount
* 组件从DOM树remove后立即执行.主要用来执行一些必要的清理任务。例如清除setTimeout等函数
##### 布局
* rn的UI布局方面沿用了前端惯用的css的盒子模型
//margin/padding/border 相关布局属性
margin 留白
marginBottom 底部留白
marginLeft 左外留白
marginRight 右外留白
marginTop 上外留白
marginVertical 上下外留白的简写，如果marginTop与marginBottom一样的话，可以直接用这个值代替
marginHorizontal 左右外留白的简写
borderColor 整体边框颜色
borderRadius 整体边框的圆角
borderWidth 整体边框的宽
borderStyle 边框样式 dotted solid double dashed等
borderBottomColor 底边框颜色
borderBottomWidth 底边框宽度
borderLeftColor 左边框颜色
borderLeftWidth 左边框宽度
borderRightColor 右边框颜色
borderRightWidth 右边框宽度
borderTopColor 上边框颜色
borderTopWidth 上边框宽度
borderBottomLeftRadius 左下角圆角边框
borderBottomRightRadius 右下角圆角边框
borderTopLeftRadius 上边框左圆角
borderTopRightRadius 上边框右圆角
padding 内留白
paddingBottom
paddingTop
paddingLeft
paddingRight
paddingHorizontal
paddingVertical
height 元素高度，包含padding与border
width 元素宽度，包含padding与border
//定位相关
position
top
right
bottom
left
//文字相关
color
fontFamily
fontSize
fontStyle
fontWeight
textAlign
textDecorationColor
textDecorationLine
textDecorationStyle
letterSpacing
lineHeight
//阴影相关
shadowColor 阴影色IOS only
shadowOffset 阴影距离IOS only
shadowOpacity 阴影透明度IOS only
shadowRadius 阴影半径 IOS only
elevation 仰角 android only
//其他
opacity
overflow
resizeMode
rotation
scaleX
scaleY
transform
transformMatrix
translateX
translateY
writingDirection
* 支持flex-box布局,强烈建议使用,一旦理解写布局能大大地提高开发速度,适配性也不错,前端的默认布局是自上而下,自左向右的布局方式
学习flex布局建议看[阮一峰老师的博客](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
博客中主要介绍的flex布局在react中的使用,_注意在rn中使用flex与react中的flex主要区别是_`主轴`_默认是column而不是row_
下面有几张形象的图片用来理解flex-box布局
> **这里重点标记一个东西:`position`属性,`position属性`she值`absluate`就会使当前component脱离文档流,比如现在设置该component为absluate以后left,top,等会依据父控件来进行排版,如果设置margin那么会依据相邻的兄弟控件进行排版**