setState 通过引发一次组件的更新过程来引发重新绘制
setState 方法被调用时,会引起 React 的 4 个生命周期的函数被调用:
shouldComponentUpdate (this.state 没有得到更新)
componentWillUpdate (this.state 没有得到更新)
reader (this.state 得到更新)
componentDidUpdate
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(porps) {
super(porps);
this.state = {
firstName: 'xu',
lastName: 'tongbao'
};
}
shouldComponentUpdate() {
console.log('shouldUpdate:');
console.log(this.state);
return true;
}
componentWillUpdate() {
console.log('willUpate:');
console.log(this.state);
}
componentDidMount() {
this.setState({firstName: 'li'});
this.setState({lastName: 'lei'});
}
render() {
console.log('render:');
console.log(this.state);
return (
<div className="App">
<div>{this.state.firstName + ' ' + this.state.lastName}</div>
</div>
);
}
}
export default App;