React学习（从零基础到精通）00010111

react生命周期（新）

    <script type="text/babel">
        /*
            1. 初始化阶段：由ReactDOM.render()触发----初次渲染
                        1.contructor()
                        2.getDerivedStateFromProps()
                        3.render()
                        4.componentDidMount()  =====》常用，
                            一般在这个钩子中做一些初始化的事，例如：开启定时器，发生网络请求，订阅消息
            2. 更新阶段：由组件内部this.setState()或父组件render触发
                        1.getDerivedStateFromProps()
                        2. shouldComponentUpdate()
                        3.render()  =====》常用，必须使用的一个
                        4.getSnapshotBeforeUpdate()
                        4.componentDidUpdate()
            3.卸载组件：由ReactDOM.unmountComponentAtNode()触发
                        1. componentWillUnmount()  =====》常用，
                            一般在这个钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息
        */
        class Count extends React.Component{
            //构造器
            constructor(props){
                console.log("Count-constructor");
                super(props)
                this.state = {count:0}
            }
            //初始化状态
            // state = {
            //     count:0
            // }
            add = ()=>{
                const {count} = this.state
                this.setState({
                    count:count+1
                })
            }
            //卸载组件按钮的回调
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById("test"))
            }
            //强制更新按钮的回调
            force = ()=>{
                this.forceUpdate()
            }
            //此方法适用于罕见的用例，state的值在任何时候都取决于props，但会导致代码冗余，所以一般不会用
            static getDerivedStateFromProps(props,state){
                console.log("Count-getDerivedStateFromProps",props,state);
                return null
                //return {count:100}//状态对象，影响了状态的更新，状态不更新了
                // return props
            }
            // 组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount");
            }
            //组件将要卸载
            componentWillUnmount(){
                console.log("Count-componentWillUnmount");
            }
             //组件应不应该更新，控制组件更新的阀门
             shouldComponentUpdate(){
                console.log("Count-shouldComponentUpdate");
                return true //必须写，true才能通行
            }

            render(){
                console.log("Count-render");
                const {count} = this.state
                return (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我加1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
            //在更新之前获取快照
            getSnapshotBeforeUpdate(){
                console.log("Count-getSnapshotBeforeUpdate");
                return "哈哈哈"
            }
            //组件更新完毕的钩子
            componentDidUpdate(prevProps,prevState,snapshotVal){
                console.log("Count-componentDidUpdate",prevProps,prevState,snapshotVal);
            }
        }
        ReactDOM.render(<Count count={200}/>,document.getElementById("test"))
    </script>