学习总结 ~ （一）React Native 初学 之 生命周

                                     以下只是我初学时遇到的问题并且都是要牢记的知识点

---

ReactNative  生命周期

render() 在调用的时候， 会检测this.props 和this.state， 返回一个组件。该函数不修改组件state， 每次调用都返回相同的结果。如果需要和浏览器交互， 在 componentDidMount() 中或者其他生命周期中做这件事。

*  componentWillMount():

只调用一次，在初始化渲染执行之前立刻调用。

*  componentDidMount():

在初始化渲染执行之后立刻调用一次， 只有客户端有效（服务端不会调用，暂不了解）。

*  componentWillReceiveProps():

在组件接收到新的props的时候调用。在初始化渲染的时候， 该方法不会调用。在prop传入之后， render() 渲染之前更新state。旧的props可以通过this.props获取到。在函数中调用this.State() 将不会引起二次渲染。

* shouldComponentUpdate():

在接收到新的props或者state， 将要渲染之前调用。在初始化渲染的时候不会调用。如果确定新的props和state不会导致组件更新， 则此处应该返回false。则render()将不会执行， 直到下一次state改变。

* componentWillUpdate（）：

在接收到新的props和state之前立刻调用。在初始化渲染的时候不会调用。可以使用该方法做一些更新之前的准备工作。（ 不能在此方法中使用this.setState（））

* componentDidUpdate（）：

* componentWillUnmount（）：

ReactNative  Flexbox布局

* FlexDirection：决定布局的主轴。 （父视图属性）

水平轴：

'row' : 从左向右依次排序。

'row-reverse' :  从右向左依次排序。

竖直轴：

'column' :    从上向下依次排序。（默认）

'column-reverse' : 从下向上依次排序。

* JustifyContent：决定子元素沿着主轴的排列方式。 （父视图属性）

'flex-start' : 从行首开始排列 （默认）。

'flex-end' :  从行尾开始排列。

'center' :    向每行中点排列，每行第一个元素到行首的距离和每行最后一个元素到行位的距离相等。

'space-around' : 每行均匀分配，相邻元素之间距离相等。每行第一个元素与行首对齐，最后一个元素与行尾对齐。

‘space-between'  : 每行均匀分配，相邻元素之间距离相等。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离是相邻元素之间距离的一半。

* AlignItems:  决定子元素沿着次轴的排列方式。 （父视图属性）

'flex-start' : 元素向侧轴起点排列 。

'flex-end' : 元素向侧轴终点排列 。

'center' :  元素在侧轴居中。

'stretch' : 侧轴方向拉伸，与容器相同的高度和宽度。（默认）

* FlexWrap:决定子元素在父视图内是否可以多行排列（父视图属性）

'nowrap':  元素只排列在一行上，可能导致溢出。(默认)

'wrap': 元素在一行排列不下时，可以多行排列。

* Alignself:  决定自身的排列方式，可重写父视图AlignItems的属性 （子视图属性）

'flex-start' : 元素位于容器的开头 。

'flex-end' : 元素位于容器的结尾。

'center' :  元素位于容器的中心。

'stretch' : 元素被拉伸以适应于容器。

'auto (default)' :继承了父容器的AlignItems的属性 ， 如果没有父容器则为’stretch’.

* Flex：定义了一个可伸缩元素的能力，默认为0。

ListView

* ListView ​组件必备两个属性：dataSource  、renderRow 。

1.      dataSource :  数据源。

2.      renderRow ：逐个解析数据源中的数据， 然后返回一个设定好的组件来渲染。

3.      rowHasChanged 函数也是ListView的必备属性。比较两行数据是否是同一个数据。

首先ListView可以使用所有ScrollView的属性。

renderSectionHeader  :  (sectionData, sectionID)  => renderabl

可以给section渲染一个粘性的标题。

renderFooter :    (  ) =>  renderable    尾部视图

renderHeader :  (  ) =>  renderable    头部视图

*  TouchableWithoutFeedback :  文档说除非有很好的理由否则不要用这个组件。起初我想设置ListView没有点击高亮的效果， 用了这个方法发现有卡顿现象， 不知道是我写的有问题还是它自身带来的影响， 但是想控制高亮效果的话还是自己写方法吧。

​

3. 20 ~ 3. 26