React生命周期--比较实用，清晰

 1 class MyComponent extends Component {
 2     constructor(props) {
 3         super(props);
 4         this.state = {
 5             name: 'Hello World',
 6         };
 7     }
 8 
 9     componentWillMount() {
10         console.log('渲染之前');
11     }
12 
13     render() {
14         console.log('渲染');
15     }
16 
17     componentDidMount() {
18         console.log('渲染完成');
19     }
20 
21     componentWillReceiveProps(nextProps) {
22         console.log('接收到来自父组件的数据', nextProps);
23     }
24 
25     shouldComponentUpdate(nextProps, nextState) {
26         console.log('判断数据是否更新true，false来判断', nextProps, nextState);
27     }
28 
29     componentWillUpdate(nextProps, nextState) {
30         console.log('组件数据将要更新', nextProps, nextState);
31     }
32 
33     componentDidUpdate(prevProps) {
34         console.log('组件数据更新完毕', prevProps);
35     }
36 
37     componentWillUnmount() {
38         console.log('已经销毁');
39     }
40 }

 

转载于:https://www.cnblogs.com/cxyqts/p/11021824.html