本章節(jié)主要介紹
- 屬性
- 狀態(tài)
屬性
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
代碼中Image標(biāo)簽有兩個(gè)屬性锣披，source和style精续，自定義組件怎么定義屬性呢？
答案是：不需要定義婚脱，直接使用今魔！
import React, {
Component
} from 'react';
import {
Text,
View
} from 'react-native';
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop: 50}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
代碼中Greeting為自定義組件，{this.props.name}可以直接使用屬性障贸。
個(gè)人覺得屬性不定義错森，直接使用，雖然靈活篮洁，但是沒有規(guī)范容易造成混亂涩维。所以建議在自定義組件上寫上注釋：該組件使用了那些屬性，有什么作用等信息袁波。
屬性由父組件指定瓦阐；如果沒有指定，直接使用也不會報(bào)錯篷牌。屬性一經(jīng)指定睡蟋，在組件的整個(gè)生命周期中就不會變化了娃磺。對于需要改變的數(shù)據(jù)薄湿，我們需要用到狀態(tài)。
狀態(tài)
構(gòu)造組件的時(shí)候偷卧，需要先初始化狀態(tài)豺瘤。想要改變狀態(tài)，需要調(diào)用this.setState方法听诸。
寫一個(gè)文字不斷閃爍的程序：因?yàn)槲淖植粫兓螅允褂脤傩裕尭附M件指定晌梨。顯示或隱藏的狀態(tài)隨著時(shí)間不斷變化桥嗤，所以應(yīng)該是一個(gè)屬性。設(shè)置一個(gè)定時(shí)器仔蝌，每隔一秒鐘設(shè)置一下顯示狀態(tài)泛领。
import React, {
Component
} from 'react';
import {
Text,
View
} from 'react-native';
class Blink extends Component {
state = {
isShowingText: true
};
componentDidMount() {
// 每1000毫秒對showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return {
isShowingText: !previousState.isShowingText
};
});
}, 1000);
}
render() {
// 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
if (!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
componentDidMount方法為組件的生命周期方法，他會在組件剛加載完的時(shí)候調(diào)用一次敛惊，以后便不會再調(diào)用渊鞋。類似于Android Activity 的 onCreate 方法。
- 一切頁面的變化都是state的變化。
- 必須使用
setState()方法改變狀態(tài)值锡宋，直接賦值儡湾，如：this.state.likes = 100;無效。 -
setState()方法是個(gè)合并操作执俩，不會影響其他狀態(tài)值徐钠。 -
setState()方法是個(gè)異步操作，不會立即生效役首。
