React Native——Component（组件）

React利用JSX语法将html标签封装成组件的形式，来插入到DOM中，能够很方便的构建出网页UI。在React Native中，组件还是其最核心的东西，各个界面UI都是经过基础组件的拼装来实现的。

JSX

React 的核心机制就是建立虚拟DOM，在虚拟DOM与实际DOM之间经过强大的Diff算法来减小对实际DOM的渲染操做以提高性能。虚拟DOM能够用原生的JS来建立，可是这样的方式让代码的可读性不够友好，Facebook就利用你们熟悉的XML语法结合JS创造了JSX语法。JSX既是原生的JS，又能直观易懂的展现这些语意化的组件。

使用JSX语法定义组件V：

import React, {Component} from "react";
import {Alert, StyleSheet, Text, View} from "react-native";
export default class V extends Component {
    render() {
        return (
            
  
  
  

  
 
  
    this.press()}>访问 
   

 
        );
    }

    press = () => {
        Alert.alert("标题", "内容");
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    visite: {
        width: 40,
        height: 40,
        backgroundColor: '#00ff00'
    }
});复制代码

在组件的JS文件中，能够直接使用ES6语法，组件的层次结构都是在render方法中采用JSX语法来定义，能够将JSX语法看作是JS和XML混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JS解析。

props（属性）

UI的各类展现效果，须要用到它的属性props。大多数的组件在定义的时候就可使用各类参数来定制，这些参数就是组件的属性props。props中的某个属性的值一般是在父组件中指定，并且一经指定，通常都不会再改变，除非父组件去从新指定它。

import React, {Component} from "react";
import {Text, View} from "react-native";
class C extends Component {

    // 定义并初始化属性，es6写法
    static defaultProps = {name: "Jack", age: 25};
    static propTypes = {name: React.PropTypes.string, age: React.PropTypes.number};

    render() {
        return (
            
  
  
  

 
  
  {this.props.name + " " + this.props.age + " " + this.props.sex} 

 
        );
    }
}

export default class V extends Component {
    render() {
        let cName1 = 'Smith';
        let cName2 = 'Mark';
        let cAge1 = 30;
        let cAge2 = 20;
        let cSex1 = '男';
        let cSex2 = '女';
        return (
            
  
  
  

  
 
   
    
    
   

 
        );
    }
}复制代码

在上面的代码中，组件C中定义了两个默认的属性name和age，并给定了类型和初始值。在组件V中，引用了组件C，所以组件V为组件C的父组件。父组件V给组件C的name和age属性指定新的属性值，同时新增了一个sex的属性并给定属性值。那么在组件C中是不能改变组件V给它指定的name、age和sex的值。

state（状态）

若是须要改变组件的参数来实现交互，须要用到它的状态state。一般在组件的构造函数中初始化state，在须要修改的时候调用setState()方法。

举一个例子，一段文本点击后改变它的背景，那么咱们将bgColor定义为组件V3的状态，在constructor函数中初始化，点击后改变该状态的值：

import React, {Component} from "react";
import {Text, View} from "react-native";
export default class V3 extends Component {

    constructor(props) {
        super(props);
        this.state = {bgColor: "#ffffff"};
    }

    render() {
        return (
            
  
  
  

  
 
  
    this.press()}>点击改变背景颜色 
   

 
        );
    }

    press = () => {
        if (this.state.bgColor === "#ffffff") {
            this.setState({bgColor: "#00ff00"});
        } else if (this.state.bgColor === "#00ff00") {
            this.setState({bgColor: "#ff00ff"});
        } else {
            this.setState({bgColor: "#ffffff"});
        }
    }
}复制代码

组件生命周期

组件生命周期

上流程图描述了组件从建立、运行到销毁的整个过程，能够看到若是一个组件在被建立，从开始一直到运行会依次调用getDefaultProps到render这五个函数；在运行过程当中，若是有属性和状态的改变，又会触发左侧的其余函数的调用，并在此回到运行状态；当组件即将会被销毁时，会调用函数conponentWillUnmount来通知组件，到最终组件销毁，生命周期结束。

• getDefaultProps 获取默认属性，并初始化props;
• getInitialState 获取初始化的组件状态state；
• componentWillMount 组件将会被装载，在渲染render前调用；
• componentWillReceiveProps 若是接收到属性就会调用该方法，旧的属性仍然能够经过this.props来获取，也能够调用this.setState来更新组件的状态，这里更新状态是安全的，不会触发render。
• shouldComponentUpdate 决定是否更新组件；
• componentWillUpdate 若是组件的状态或者属性改变了，而且shouldComponentUpdate为true，就会调用侧方法准备更新组件；
• render渲染，即初次渲染和更新组件的方法；
• componentDidUpdate 组件更新完成后会调用此方法；
• conponentWillUnmount 当组件要销毁，即从界面移除时，就会调用此方法。

在ES6中已经废除了getDefaultProps和getInitialState的方式，直接经过this.props和this.state来获取。