《React精髓》实践笔记 - Chapter 6

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()

1. 得到两个参数：
   nextProps:下一个属性对象
   nextState: 下一个状态对象

2. 不能在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
    },

1. React提供了一些预置的验证器供我们使用。全部验证器信息可以在github上面看到
2. 也可以自定义验证器，如上面代码一样，需要在验证失败的时候返回一个错误