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

2. react生命周期（旧）

    <script type="text/babel">
        /*
            1. 初始化阶段：由ReactDOM.render()触发----初次渲染
                        1.contructor()
                        2.componentWillMount()
                        3.render()
                        4.componentDidMount()  =====》常用，
                            一般在这个钩子中做一些初始化的事，例如：开启定时器，发生网络请求，订阅消息
            2. 更新阶段：由组件内部this.setState()或父组件render触发
                        1. shouldComponentUpdate()
                        2.componentWillUpdate()
                        3.render()  =====》常用，必须使用的一个
                        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()
            }
            // 组件将要挂载的钩子
            componentWillMount(){
                console.log("Count-componentWillMount");
            }
            // 组件挂载完毕的钩子
            componentDidMount(){
                console.log("Count-componentDidMount");
            }
            //组件将要卸载
            componentWillUnmount(){
                console.log("Count-componentWillUnmount");
            }
             //组件应不应该更新，控制组件更新的阀门
             shouldComponentUpdate(){
                console.log("Count-shouldComponentUpdate");
                return true //必须写，true才能通行
            }
            //组件将要更新的钩子
            componentWillUpdate(){
                console.log("Count-componentWillUpdate");
            }
            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log("Count-componentDidUpdate");
            }
            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>
                )
            }
        }

        class A extends React.Component{
            state = {carName:"奔驰"}
            changeCar = ()=>{
                this.setState({carName:"宝马"})
            }
            render(){
                const {carName} = this.state
                return(
                    <div>
                        <span>A组件</span>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={carName} />
                    </div>
                )
            }
        }
        class B extends React.Component{
            //组件将要接收新的props的钩子
            componentWillReceiveProps(props){
                console.log("B----componentWillReceiveProps",props);
            }
            shouldComponentUpdate(){
                console.log("B----shouldComponentUpdate");
                return true
            }
            componentWillUpdate(){
                console.log("B----componentWillUpdate");
            }
            componentDidUpdate(){
                console.log("B----componentDidUpdate");
            }
            render(){
                console.log("B----render");
                return(
                    <div>
                        B组件，接收到的车是{this.props.carName}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById("test"))
    </script>