React Native实战系列第十篇 — 组件生命周期

前言

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

一、看图分析

• 在下图中描述了React Native中组件的生命周期，我们可以根据其中的执行顺序在对应的函数中做对应的操作。

react-native组件的生命周期

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

<p></p>
<p></p>

二、实例化阶段函数功能分析

getDefaultProps

• 该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值；

• 在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。

getInitialState

• 该函数是用于对组件的一些状态进行初始化；

• 由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值， 比如：

this.setState({
    activePage: activePage, 
    currentX: contentOffSetX  
});

• 注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount

• 相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用，功能相对较少。

render

• render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ;

• 此外，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值 。

componentDidMount

• 在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作；

• 因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。

• 下图是利用了fetch API来异步请求Web API来加载数据：

fetch API来异步请求Web API

<p></p>
<p></p>
<p></p>

三、存在期阶段函数功能分析

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

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

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

componentDidUpdate
更新后的相关操作

四、销毁期阶段函数功能分析

• 用于清理一些无用的内容，如：点击事件Listener，只有一个过程：componentWillUnmount

五、常用知识点分析

this.state

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

• 举个例子：

状态更新引起界面更新

• 当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

• 可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值，根据diff算法算出来有差以后，就会执行ReactDom的render方法，重新渲染页面。

• 注意：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

<p></p>
<p></p>

六、案例实操——动态添加和删除商品

• 案例主要技术点：
  充分利用了RN生命周期的钩子函数，实现界面刷新。

• 案例主要步骤：
  1.1 利用控件的索引index计算出控件所在的行号和列号
  1.2 利用列号计算控件的x值
  1.3 利用行号计算控件的y值

• 案例思路

  
  九宫格布局

• 案例核心代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image
} from 'react-native';

const Dimensions = require('Dimensions');
const {width, height} = Dimensions.get('window');
const dataArr = require('./localData/data.json');

export default class XZHBadgeView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            // 组件数组
            shopViewArr: []
        };
    }

    render() {
        return (
            <View style={styles.container}>
                {/*上面的视图*/}
                <View style={styles.topViewStyle}>
                    {/*添加商品*/}
                    <TouchableOpacity
                        onPress={()=>this._addShop()}
                        style={styles.btnStyle}
                    >
                        <Text>添加商品</Text>
                    </TouchableOpacity>
                    {/*删除商品*/}
                    <TouchableOpacity
                        onPress={()=>this._removeShop()}
                        style={[styles.btnStyle, {backgroundColor:'red'}]}
                    >
                        <Text>删除商品</Text>
                    </TouchableOpacity>
                </View>
                {/*下面的视图*/}
                <View style={styles.contentViewStyle}>
                    {this.state.shopViewArr}
                </View>
            </View>
        );
    }

    /**
     * 添加商品
     */
    _addShop(){
        // 1. 总列数 3, 宽度和高度
        let cols = 3, shopW = 100, shopH = 120;

        // 2. 全局的索引
        var index = this.state.shopViewArr.length;

        // 验证
        if(index > dataArr.length - 1){
            alert('不要败家了,够了!');
            return;
        }

        // 3. 根据索引求出当前盒子的行号和列号
        let col = parseInt(index % cols);
        let row = parseInt(index / cols);

        let leftSpace = (width * 0.9 - cols * shopW) / (cols - 1);
        let topSpace = (height * 0.8 - 3 * shopH) / 2;

        let left = (shopW + leftSpace) * col;
        let top = (shopH + topSpace) * row;

        // 4. 创建组件
        let shopView = (
            <View
                style={{
                   position:'absolute',
                   left:left,
                   top:top,
                   justifyContent:'center',
                   alignItems:'center'
                }}
                key={index}
            >
                <Image
                    source={{uri: dataArr[index].icon}}
                    style={{width:shopW, height:shopW}}
                />
                <Text>{dataArr[index].name}</Text>
            </View>
        );

        var tempArr = this.state.shopViewArr;
        tempArr.push(shopView);

        this.setState({
            shopViewArr: tempArr
        });

    }


    /**
     * 删除商品
     */
    _removeShop(){
        
        if(this.state.shopViewArr.length == 0){
            alert('购物车空空如也~');
            return;
        }
        
        var tempArr = this.state.shopViewArr;
        tempArr.pop();
        
        
        this.setState({
            shopViewArr: tempArr
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },

    topViewStyle: {
       // backgroundColor:'red',
       padding:30,
       flexDirection:'row',
       justifyContent:'space-around'
    },

    btnStyle: {
        width:120,
        height:40,
        backgroundColor:'green',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:10
    },

    contentViewStyle:{
        backgroundColor:'#fff',
        width: width * 0.9,
        height: height * 0.8,
        marginLeft: width * 0.05
    }
});

• 运行效果截图：

添加和删除商品

<p></p>
<p></p>
<p></p>
<p></p>

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！