ReactNative生命周期和Flexbox布局

ReactNative生命周期

屏幕快照 2020-05-26 上午9.20.21.png

从图看：在React Native中，组件的生命周期大致可以分为3个阶段（实例化阶段，存在阶段，销毁阶段）

实例化阶段函数功能分析

• getDefaultProps ：在组件中，我们可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以修改props，只可由其他组件调用它时再外部进行修改。
• getInitialState：该函数用于对组件一些状态进行初始化该函数不同于getDefaultProps,在以后的过程中，会再次调用，所以可以将控制控件状态的一些变量放在这里初始化,比如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值.注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次渲染.
• componentWillMount： 组件将要被加载到视图之前调用
• componentDidMount: 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作等。

存在阶段函数功能分析

• shouldComponentUpdate:一般用于优化，可以返回false或true来控制是否进行渲染(true 的话进行下2步操作，false不会进行下去)
• componentWillUpdate: 组件刷新前调用
• componentDidUpdate：更新后

销毁阶段函数功能分析

• componentWillUnmount 用于清理一些无用的内容，比如：定时器清除
  生命周期方法调用：

  
  
  屏幕快照 2020-05-27 上午11.20.41.png

使用Flexbox布局

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

• Flex Direction：在组件的style中指定flexDirection可以决定布局的主轴。默认是竖直轴(column)方向（类似于x轴 y轴）
  • row 水平轴方向排列，
  • column 竖直轴方向排列。
• Justify Content：在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式
  • flex-start:主轴的起始端
  • center ：主轴的中心
  • flex-end：主轴的末端
  • space-around：均分展示（左右边有边距）
  • space-between：均分展示（左右边无边距）
• Align Items：决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式
  • flex-start：次轴的起始端
  • center ：次轴的中心
  • flex-end：次轴的末端
  • stretch ：默认充满父元素空间（要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）

另：有一份网上总结的布局图解通俗易懂：

简易布局图解

flexbox布局与传统web的css中flex布局区别

• flexDirection在ReactNative中默认是竖直轴（column）方向，但在传统css中默认是横轴（row）方向
• flexbox布局中使用flex布局，父元素固定宽或高，设置display：flex，在ReactNative中设置子元素的宽或高不能超过父元素，或者不设置。如果超过父元素就不会均分布局。但是在传统css中如果子元素的尺寸超过父元素的话也是可以均分布局的。