本章节主要介绍
- 属性
- 状态
属性
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标签有两个属性，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}可以直接使用属性。
个人觉得属性不定义，直接使用，虽然灵活，但是没有规范容易造成混乱。所以建议在自定义组件上写上注释：该组件使用了那些属性，有什么作用等信息。
属性由父组件指定；如果没有指定，直接使用也不会报错。属性一经指定，在组件的整个生命周期中就不会变化了。对于需要改变的数据，我们需要用到状态。
状态
构造组件的时候，需要先初始化状态。想要改变状态，需要调用this.setState方法。
写一个文字不断闪烁的程序：因为文字不会变化，所以使用属性，让父组件指定。显示或隐藏的状态随着时间不断变化，所以应该是一个属性。设置一个定时器，每隔一秒钟设置一下显示状态。
import React, {
Component
} from 'react';
import {
Text,
View
} from 'react-native';
class Blink extends Component {
state = {
isShowingText: true
};
componentDidMount() {
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return {
isShowingText: !previousState.isShowingText
};
});
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
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方法为组件的生命周期方法，他会在组件刚加载完的时候调用一次，以后便不会再调用。类似于Android Activity 的 onCreate 方法。
- 一切页面的变化都是state的变化。
- 必须使用
setState()方法改变状态值，直接赋值，如：this.state.likes = 100;无效。 -
setState()方法是个合并操作，不会影响其他状态值。 -
setState()方法是个异步操作，不会立即生效。
