ｒｅａｃｔ生命周期

Posted 2020-12-28 gaoxuerong123

  1 // import React from ‘react‘;
  2 // import ReactDOM from ‘react-dom‘;
  3 // import ‘./index.css‘;
  4 // import App from ‘./App‘;
  5 // import registerServiceWorker from ‘./registerServiceWorker‘;
  6 
  7 // ReactDOM.render(<App />, document.getElementById(‘root‘));
  8 // registerServiceWorker();
  9 
 10 
 11 
 12 
 13 
 14 import React from ‘react‘
 15 import ReactDOM from ‘react-dom‘;
 16 import registerServiceWorker from ‘./registerServiceWorker‘;
 17 class SubCounter extends React.Component {
 18     componentWillReceiveProps() {
 19         console.log(‘9、子组件将要接收到新属性‘);
 20     }
 21 
 22     shouldComponentUpdate(newProps, newState) {
 23         console.log(‘10、子组件是否需要更新‘);
 24         if (newProps.number < 5) return true;
 25         return false
 26     }
 27 
 28     componentWillUpdate() {
 29         console.log(‘11、子组件将要更新‘);
 30     }
 31 
 32     componentDidUpdate() {
 33         console.log(‘13、子组件更新完成‘);
 34     }
 35 
 36     componentWillUnmount() {
 37         console.log(‘14、子组件将卸载‘);
 38     }
 39 
 40     render() {
 41         console.log(‘12、子组件挂载中‘);
 42         return (
 43                 <p>{this.props.number}</p>
 44         )
 45     }
 46 }
 47 
 48 class Counter extends React.Component {
 49     static defaultProps = {
 50         //1、加载默认属性
 51         name: ‘sls‘,
 52         age:23
 53     };
 54 
 55     constructor() {
 56         super();
 57         //2、加载默认状态
 58         this.state = {number: 0}
 59     }
 60 
 61     componentWillMount() {
 62         console.log(‘3、父组件挂载之前‘);
 63     }
 64 
 65     componentDidMount() {
 66         console.log(‘5、父组件挂载完成‘);
 67     }
 68 
 69     shouldComponentUpdate(newProps, newState) {
 70         console.log(‘6、父组件是否需要更新‘);
 71         if (newState.number<15) return true;
 72         return false
 73     }
 74 
 75     componentWillUpdate() {
 76         console.log(‘7、父组件将要更新‘);
 77     }
 78 
 79     componentDidUpdate() {
 80         console.log(‘8、父组件更新完成‘);
 81     }
 82 
 83     handleClick = () => {
 84         this.setState({
 85             number: this.state.number + 1
 86         })
 87     };
 88 
 89     render() {
 90         console.log(‘4、render(父组件挂载)‘);
 91         return (
 92             <div>
 93                 <p>{this.state.number}</p>
 94                 <button onClick={this.handleClick}>+</button>
 95                 {this.state.number<10?<SubCounter number={this.state.number}/>:null}
 96             </div>
 97         )
 98     }
 99 }
100 ReactDOM.render(<Counter/>, document.getElementById(‘root‘))
101 registerServiceWorker();



来源：https://juejin.im/post/5a062fb551882535cd4a4ce3