總結-舊生命周期

初始化階段: 由ReactDOM.render()觸發---初次渲染

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() ===> 常用
   一般在這個鉤子中做一些初始化的事,例如:開啟定時器,發送網路請求,訂閱消息

更新階段: 由組件內部this.setState()或父組件render觸發

1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ===> 常用
4. componentDidUpdate()

卸載組件: ReactDOM.unmountComponentAtNode()觸發

組件掛載流程

1. componentWillUnmount() ===> 常用
   一般在這個鉤子中做一些收尾的事,例如:關閉定時器,取消訂閱消息

    class Count extends React.Component {
            // 最先調用
            constructor(props) {
                super(props);
                console.log('count---constructor');
                this.state = { count: 0 }
            }

            // 組件將要掛載
            //WARNING! To be deprecated in React v17. Use componentDidMount instead.
            componentWillMount() {
                console.log('count---componentWillMount');
            }

            // 組件掛載完畢的鉤子
            componentDidMount() {
                console.log('count---componentDidMount')
            }

            componentWillUnmount() {
                console.log('count---componentWillUnmount');
            }

            // 控制更新閥門
            shouldComponentUpdate(nextProps, nextState) {
                console.log('count---shouldComponentUpdate');
                return true;
            }
            // 組件將要更新的鉤子
            //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
            componentWillUpdate(nextProps, nextState) {
                console.log('count---componentWillUpdate')
            }
            // 組件更新之後
            componentDidUpdate(prevProps, prevState) {
                console.log('count---componentDidUpdate');
            }

            add = () => {
                let { count } = this.state;
                count += 1;
                this.setState({ count: count });
            }
            unload = () => {
                root.unmount(document.getElementById('test'));
            }

            // 初始化渲染,狀態更新之後 執行
            render() {
                const { count } = this.state;
                console.log('count---render');
                return (
                    <div>
                        <h2>當前求和為: {count}</h2>
                        <button onClick={this.add}>點我加一</button>
                        <button onClick={this.unload}>卸載組件</button>
                    </div>
                )
            }
        }

父組件render流程

      class A extends React.Component {
            constructor(props) {
                super(props);
                this.state = { carName: '賓士' };
            }
            changeCar = () => {
                this.setState({ carName: '寶馬' });
            }
            render() {
                return (
                    <div>
                        <h1>A</h1>
                        <button onClick={this.changeCar}>換車</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        class B extends React.Component {
            // 組件將要接收到新的props的鉤子
            //WARNING! To be deprecated in React v17.
            //  Use new lifecycle static getDerivedStateFromProps instead.
            componentWillReceiveProps(props) {
                console.log('count---componentWillReceiveProps', props)
            }
            render() {
                return (
                    <div>
                        <h1>B</h1>
                        <h2>現在的車: {this.props.carName}</h2>
                    </div>
                )
            }
        }

新生命周期

class Count extends React.Component {

            // 最先調用
            constructor(props) {
                super(props);
                console.log('count---constructor');
                this.state = { count: 0 }
            }

            // 使用場景極其罕見,state值取決於props
            static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps', props, state);
                return null;
            }

            // 在最近一次渲染之前調用,傳值給DidUpdate
            getSnapshotBeforeUpdate = (prevProps, prevState) => {
                console.log('getSnapshotBeforeUpdate');
                return 'nihao';
            }

            // 組件掛載完畢的鉤子
            componentDidMount() {
                console.log('count---componentDidMount')
            }

            componentWillUnmount() {
                console.log('count---componentWillUnmount');
            }

            // 控制更新閥門
            shouldComponentUpdate(nextProps, nextState) {
                console.log('count---shouldComponentUpdate');
                return true;
            }
            // 組件更新之後
            componentDidUpdate(prevProps, prevState, snapshotValue) {
                console.log('count---componentDidUpdate', snapshotValue);
            }

            add = () => {
                let { count } = this.state;
                count += 1;
                this.setState({ count: count });
            }
            unload = () => {
                root.unmount(document.getElementById('test'));
            }

            // 初始化渲染,狀態更新之後 執行
            render() {
                const { count } = this.state;
                console.log('count---render');
                return (
                    <div>
                        <h2>當前求和為: {count}</h2>
                        <button onClick={this.add}>點我加一</button>
                        <button onClick={this.unload}>卸載組件</button>
                    </div>
                )
            }
        }