我們顯示必然要使用到component，React.Component 是一個(gè)抽象的Class咙鞍，通常繼承該類來構(gòu)建自定義的Component。 Component可以將U分離成獨(dú)立的碎片，有點(diǎn)類似于JavaScript的function苍碟，它接受一個(gè)任意的輸入（props）并返回一個(gè)React element描述屏幕中的內(nèi)容。
生命周期及方法
Component和Android中的activity一樣撮执，也有一定的生命周期微峰，官網(wǎng)對(duì)于其生命周期介紹如下：
基本分為三個(gè)階段：
1、掛載階段
調(diào)用方法：
constructor()?//構(gòu)造函數(shù)
componentWillMount()//將要被掛載
render()//渲染
componentDidMount()// 完成掛載
2抒钱、更新階段
調(diào)用方法：
componentWillReceiveProps(nextProps)?//作為子空間蜓肆，在props改變時(shí)調(diào)用
shouldComponentUpdate(nextProps,nextState)//是否允許更新颜凯，返回boolean
componentWillUpdate(nextProps,nextState)//將要更新
render()//渲染
componentDidUpdate(prevProps,prevState)//完成更新
3、銷毀階段
調(diào)用方法：
具體實(shí)例
//重新寫一個(gè)index.js,來演示component的生命周期
//component是從react中來的
importReact, {Component} from 'react';
//Text以及View等都是從react-native中來的
import{AppRegistry,Text}from'react-native'
//定義一個(gè)Component仗扬，按照ES6的語(yǔ)法來,就和java語(yǔ)法中定義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")
// }
// 使用這個(gè)方法進(jìn)行定義props
staticdefaultProps= {
color:'red'
};
//構(gòu)造函數(shù)
constructor(props) {
super(props)
this.state= {
name:'ruibaobao'
}
console.log("AndroidTestComponent=====constructor")
}
//compoment將要掛載的函數(shù)
componentWillMount() {
console.log("AndroidTestComponent=====componentWillMount")
}
//render屬性對(duì)應(yīng)的函數(shù)會(huì)返回一段JSX來表示該組件的結(jié)構(gòu)和布局。該部分是一個(gè)組件必不可少的地方早芭，沒有這些內(nèi)容彼城，就無法構(gòu)成一個(gè)組件。
//render方法必須返回單個(gè)根元素
//compoment掛載渲染的函數(shù)
render() {
console.log("AndroidTestComponent=====render")
return(
{
this.setState({name:'wwoairuibaobao'})
}}style={{backgroundColor:'red'}}>這是一個(gè)簡(jiǎn)單的測(cè)試text{this.state.name}
//如何使用props
//forceUpdate 會(huì)強(qiáng)制更新component退个，即使shouldComponentUpdate返回false也會(huì)更新
//{this.forceUpdate()}} style={{backgroundColor:this.props.color}} >這只是一個(gè)簡(jiǎn)單的測(cè)試t{this.state.name}{this.props.color}
);
}
//compoment已經(jīng)掛載的函數(shù)
componentDidMount() {
console.log("AndroidTestComponent=====componentDidMount")
}
//屬性改變時(shí)調(diào)用募壕，在封裝、引用子空間時(shí)會(huì)觸發(fā)子空間的這個(gè)方法
componentWillReceiveProps(nextProps) {
console.log("AndroidTestComponent=====componentWillReceiveProps")
}
//在props 和 state更新之后语盈，根據(jù)返回值判斷是否需要更新? true 需要? false 不需要
shouldComponentUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====shouldComponentUpdate")
console.log(nextProps)
console.log(nextState)
return true;
}
//component將要更新時(shí)調(diào)用
componentWillUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====componentWillUpdate")
console.log(nextProps)
console.log(nextState)
}
//component更新后調(diào)用
componentDidUpdate(prevProps, prevState) {
console.log("AndroidTestComponent=====componentDidUpdate")
console.log(prevProps)
console.log(prevState)
}
//component銷毀時(shí)調(diào)用
componentWillUnmount() {
console.log("AndroidTestComponent=====componentWillUnmount")
}
}
//另一種定義props的方法舱馅，如果static defaultProps也定義了，這個(gè)會(huì)覆蓋上面的
// AndroidTestComponent.defaultProps = {
//? ? name:'xiaoerlang'
// }
//進(jìn)行注冊(cè) 'RNProject'為項(xiàng)目名稱 AndroidTestComponent 為啟動(dòng)的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代嗤、點(diǎn)擊‘這是一個(gè)簡(jiǎn)單的測(cè)試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更新之后，根據(jù)返回值判斷是否需要更新? true 需要? false 不需要
shouldComponentUpdate(nextProps, nextState) {
console.log("AndroidTestComponent=====shouldComponentUpdate")
console.log(nextProps)
console.log(nextState)
return false;
}
點(diǎn)擊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' }
這個(gè)時(shí)候默認(rèn)是沒有進(jìn)行渲染的照棋，只有調(diào)用forceUpdate才會(huì)渲染资溃。
參考文章
ps：以上網(wǎng)站部分不是最新的語(yǔ)法。
