React学习手册

150

｜

第

7

章

}

componentDidUpdate(prevProps) {

const { title, rating } = this.props

const status = (rating > prevProps.rating) ? 'better' : 'worse'

console.log(`${title} is getting ${status}`)

}

图

7

-

3

：使用shouldComponentUpdate方法每次只更新一个组件

更新生命周期方法

componentWillUpdate

和

componentDidUpdate

是更新之前或者之后

与

DOM

交互的好地方。在接下来的示例中，更新过程将会被

componentWillUpdate

方

法中的一个警告提示框暂停：

componentWillMount() {

this.style = { backgroundColor: "#CCC" }

}

shouldComponentUpdate(nextProps) {

return this.props.rating !== nextProps.rating

}

componentWillUpdate(

nextProps

) {

const { title, rating } = this.props

this.style = null

组件扩展

｜

151

this.refs.title.style.backgroundColor = "red"

this.refs.title.style.color ...