componentWillReceiveProps()
可以比较前后两个状态
componentWillReceiveProps: (nextProps) => {
console.log('[Snapterest] StreamTweet : 8.Running componentWillReceiveProps()');
let currentTweetLength = this.props.tweet.text.length;
let nextTweetlength = nextProps.props.tweet.length
let isNumberOfCharectersIsIncreasing = (nextTweetlength > currentTweetLength);
let headerText;
this.setState({
numberOfCharectersIsIncreasing:isNumberOfCharectersIsIncreasing
});
if(isNumberOfCharectersIsIncreasing){
headerText = 'Number of charecters is increasing';
}else{
headerText='Lastest public photo from Twitter'
}
this.setState({
headerText:headerText
});
window.snapterest.numberOfReceivedTweets++
},
这里面虽然引用了两次this.setState()，但是React做了内部优化，会把状态更新操作放在一起批量执行。
componentWillUpdate()
得到两个参数：
nextProps:下一个属性对象
nextState: 下一个状态对象不能在componentWillUpdate方法中使用this.setState。如果想要更新组件状态以相应其属性变化，应该在componentWillReceiveProps中做
验证组件属性
使用组件的PropTypes来验证组件的属性
propTypes: {
tweet: (properties, propertyName, componentName) => {
let tweet = properties[propertyName];
if (!tweet) {
return new Error('Tweet must be set.')
}
if (!tweet.media) {
return new Error('Tweet must have an image.')
}
},
//验证onImageClick是否是个函数
onImageClick: React.PropTypes.func
},
- React提供了一些预置的验证器供我们使用。全部验证器信息可以在github上面看到
- 也可以自定义验证器，如上面代码一样，需要在验证失败的时候返回一个错误
