react生命周期

53 阅读1分钟

` //初始化阶段:由ReactDom.render() 触发初次渲染 // constructor() // componentWillMount() // render() // componentDidMount() //一般在这个钩子中做初始化的事,开启定时器、发送请求、订阅消息

    //更新阶段:组件内部this.setState()或者父组件render触发的时候

    // shouldComponentUndate()
    // componentWillUpdate();
    // render()
    // componentDidUpdate()

    //卸载组件;有ReactDom.unmountComponentAtNode()触发
    // componentWillUnMount()   一般在这个钩子做收尾的事,关闭定时器、取消订阅




    class Count extends React.Component{
        constructor(props){
            console.log(constructor);
            super(props)
        }
        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(componentWillMount);
        }
        //组件将要卸载的时候
        componentWillUnMount(){
            this.death()
        }

        shouldComponentUndate(){
            //这个钩子,如果不写默认返回值是true
            console.log("shouldComponentUndate");
        }
        //组件将要更新时候调用
        componentWillUpdate(){
            console.log("componentWillUpdate");
        }
        //组件更新完后调用
        componentDidUpdate(){
            console.log("componentDidUpdate");
        }

        //组件挂载完毕的钩子
        componentDidMount(){
            console.log(componentDidMount);
        } 

        //render过程进行挂载组件
        render() {
            const {count} = this.state
            return <div>
                    <h2>求和结果{count}</h2>
                    <button onClick = {this.add}>+</button>  
                    <button onClick = {this.death}>+</button>  
                    <button onClick = {this.force}>+</button>  
                </div>
        }
    }



    class A extends React.Component{
        state = {carName:"222"}
        changeCar = () => {
            const {carName} = this.state
            this.setState({carName: '111'})
        }
        render (){
            <div>
                <div>a</div>
                <button onClick = {this.changeCar}></button>
            <B carName={this.state.carName} />
            </div>
        }
    }

    class B extends React.Component{
        // 接收父组件新的props值的时候调用的钩子
        componentWillReceiveProps(){
            console.log("componentWillReceiveProps");
        }
        render (){

                <div>b{this.props.carName}</div>

        }
    }`