React Native——Component（组件）

原文地址：https://juejin.im/post/595a503cf265da6c34333aa9

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

到

rende
97ad
r

这五个函数；在运行过程中，如果有属性和状态的改变，又会触发左侧的其他函数的调用，并在此回到运行状态；当组件即将会被销毁时，会调用函数

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

来获取。