我們顯示必然要使用到component，React.Component 是一個抽象的Class，通常繼承該類來構建自定義的Component。 Component可以將U分離成獨立的碎片，有點類似于JavaScript的function，它接受一個任意的輸入（props）并返回一個React element描述屏幕中的內容。
生命周期及方法
Component和Android中的activity一樣，也有一定的生命周期，官網對于其生命周期介紹如下：
基本分為三個階段：
1、掛載階段
調用方法：
constructor()?//構造函數
componentWillMount()//將要被掛載
render()//渲染
componentDidMount()// 完成掛載
2、更新階段
調用方法：
componentWillReceiveProps(nextProps)?//作為子空間，在props改變時調用
shouldComponentUpdate(nextProps,nextState)//是否允許更新，返回boolean
componentWillUpdate(nextProps,nextState)//將要更新
render()//渲染
componentDidUpdate(prevProps,prevState)//完成更新
3、銷毀階段
調用方法：
具體實例
//重新寫一個index.js,來演示component的生命周期
//component是從react中來的
importReact, {Component} from 'react';
//Text以及View等都是從react-native中來的
import{AppRegistry,Text}from'react-native'
//定義一個Component，按照ES6的語法來,就和java語法中定義class一樣，繼承component
class AndroidTestComponent extends Component{
????//getDefaultProps() is only supported for classes created using React.createClass. We can use a static property to define defaultProps instead.
// getDefaultProps(){
//? ? console.log("AndroidTestComponent=====getDefaultProps")
// }
// 使用這個方法進行定義props
staticdefaultProps= {
color:'red'
};
//構造函數
constructor(props) {
super(props)
this.state= {
name:'ruibaobao'
}
console.log("AndroidTestComponent=====constructor")
}
//compoment將要掛載的函數
componentWillMount() {
console.log("AndroidTestComponent=====componentWillMount")
}
//render屬性對應的函數會返回一段JSX來表示該組件的結構和布局。該部分是一個組件必不可少的地方，沒有這些內容，就無法構成一個組件。
//render方法必須返回單個根元素
//compoment掛載渲染的函數
render() {
console.log("AndroidTestComponent=====render")
return(
{
this.setState({name:'wwoairuibaobao'})
}}style={{backgroundColor:'red'}}>這是一個簡單的測試text{this.state.name}
//如何使用props
//forceUpdate 會強制更新component，即使shouldComponentUpdate返回false也會更新
//{this.forceUpdate()}} style={{backgroundColor:this.props.color}} >這只是一個簡單的測試t{this.state.name}{this.props.color}
);
}
//compoment已經掛載的函數
componentDidMount() {
console.log("AndroidTestComponent=====componentDidMount")
}
//屬性改變時調用，在封裝、引用子空間時會觸發子空間的這個方法
componentWillReceiveProps(nextProps) {
console.log("AndroidTestComponent=====componentWillReceiveProps")
}
//在props 和 state更新之后，根據返回值判斷是否需要更新? true 需要? false 不需要
shouldComponentUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====shouldComponentUpdate")
console.log(nextProps)
console.log(nextState)
return true;
}
//component將要更新時調用
componentWillUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====componentWillUpdate")
console.log(nextProps)
console.log(nextState)
}
//component更新后調用
componentDidUpdate(prevProps, prevState) {
console.log("AndroidTestComponent=====componentDidUpdate")
console.log(prevProps)
console.log(prevState)
}
//component銷毀時調用
componentWillUnmount() {
console.log("AndroidTestComponent=====componentWillUnmount")
}
}
//另一種定義props的方法，如果static defaultProps也定義了，這個會覆蓋上面的
// AndroidTestComponent.defaultProps = {
//? ? name:'xiaoerlang'
// }
//進行注冊 'RNProject'為項目名稱 AndroidTestComponent 為啟動的component
AppRegistry.registerComponent('RNProject', () => AndroidTestComponent);
打印log
1、reload
I/ReactNativeJS(24891): AndroidTestComponent=====constructor
I/ReactNativeJS(24891): AndroidTestComponent=====componentWillMount
I/ReactNativeJS(24891): AndroidTestComponent=====render
I/ReactNativeJS(24891): AndroidTestComponent=====componentDidMount
2、點擊‘這是一個簡單的測試text’
I/ReactNativeJS(24891): AndroidTestComponent=====shouldComponentUpdate
I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'wwoairuibaobao' }
I/ReactNativeJS(24891): AndroidTestComponent=====componentWillUpdate
I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'wwoairuibaobao' }
I/ReactNativeJS(24891): AndroidTestComponent=====render
I/ReactNativeJS(24891): AndroidTestComponent=====componentDidUpdate
I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'ruibaobao' }
如果shouldComponentUpdate返回false即
//在props 和 state更新之后，根據返回值判斷是否需要更新? true 需要? false 不需要
shouldComponentUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====shouldComponentUpdate")
console.log(nextProps)
console.log(nextState)
return false;
}
點擊text后log
I/ReactNativeJS(24891): AndroidTestComponent=====componentWillUpdate
I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'wwoairuibaobao' }
I/ReactNativeJS(24891): AndroidTestComponent=====render
I/ReactNativeJS(24891): AndroidTestComponent=====componentDidUpdate
I/ReactNativeJS(24891): { rootTag: 1, color: 'red' }
I/ReactNativeJS(24891): { name: 'wwoairuibaobao' }
這個時候默認是沒有進行渲染的，只有調用forceUpdate才會渲染。
參考文章
ps：以上網站部分不是最新的語法。
