react native组件的生命周期

对于习惯了iOS开发的同学，可能会对React Native中组件的生命周期很困惑。在iOS中有一个ViewDidLoad来初始化，那么在RN中，又是在哪里呢？

@H_301_17@

react-native组件的生命周期@H_301_17@

React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段，其中最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理。

getDefaultProps@H_301_17@

该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数中进行初始化和赋值；@H_301_17@
在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。@H_301_17@

getInitialState@H_301_17@

该函数是用于对组件的一些状态进行初始化；@H_301_17@
由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值，比如：@H_301_17@
```
this.setState({
  activePage: activePage,currentX: contentOffSetX  
});
```
注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount@H_301_17@

render@H_301_17@

render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ;@H_301_17@
此外，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值。@H_301_17@

componentDidMount@H_301_17@

componentWillReceiveProps
指父元素对组件的props或state进行了修改@H_301_17@

shouldComponentUpdate
一般用于优化，可以返回false或true来控制是否进行渲染@H_301_17@

componentWillUpdate
组件刷新前调用，类似componentWillMount@H_301_17@

componentDidUpdate
更新后的相关操作@H_301_17@

componentWillUnmount@H_301_17@

this.state@H_301_17@

开发中组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。@H_301_17@
举个例子：@H_301_17@

状态更新引起界面更新@H_301_17@

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。@H_301_17@
可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值，根据diff算法算出来有差以后，就会执行ReactDom的render方法，重新渲染页面。@H_301_17@
注意：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。@H_301_17@

猜你在找的React相关文章