react props更新页面数据没有变化 componentDidUpdate真的有用

子组件将props的值存放到state之后，
（componentDidMount中调用setState或直接给state赋值this.props.xx）
使用state中的值而不是直接调用this.props.xx，
props的更新不会修改state中的值，
（页面数据不会发生变化！！！）、

如果需要时时更新页面数据的话

1 直接使用this.props.xx

render(){
    return (<div>{this.props.type}</div>)   // render中调用this.props
}

但是如果值需要处理，必须放到state中就没办法了

2 在componentDidUpdate()中调用setState

在componentDidUpdate()中比较前后props，如果props发生变化，调用setState()重新赋值，会触发组件的更新。

state = {  // 将props的值传递给给state
    type: this.props.type
}

render(){
    return (<div><{this.state.type}/div>)  // render中调用state     
}

/*
重点 重点 重点
*/
componentDidUpdate(prevProps) {
    if (this.props.type!== prevProps.type) { // 比较前后props
        this.setState({  // 如果props发生变化，调用setState()
            type: this.props.type
       })
    }
}