React中的生命周期 钩子函数

React组件从创建到销毁的过程称为React生命周期。**
在生命周期当中所暴露出来的函数称为钩子函数。**

1.生命周期挂载阶段

constructor() --> componentWillMount() -->render() -->componentDidMount()

<script type="text/babel">
    class App extends React.Component{
        #1.构造器
        constructor() {
            super();
            this.myDiv = React.createRef();
            this.state={
                num:0
            }
            console.log("1、constructor")
        }
		
		#2.挂载之前调用
        componentWillMount(){    
            console.log("2、componentWillMount",this.state.num,this.myDiv.current)
        }
        
        #3.挂载阶段
        render(){
            console.log("3、constructor")
            return (
                <div ref={this.myDiv}>{this.state.num}</div>
            )
        }
        
         #4.挂载之后
        componentDidMount(){
            console.log("4、componentWillMount",this.state.num,this.myDiv.current)
        }
    }
    ReactDOM.render((
        <App></App>
    ),document.querySelector("#root"));
</script>

2.生命周期更新阶段

  1、更新props
      1、componentWillReceiveProps   当属性发生变化时执行
      2、shouldComponentUpdate(nextProps,nextState)    要返回一个bool值。true 更新false不更新
      3、componentWillUpdate(nextProps,nextState)  更新数据之前
      4、render
      5、componentDidUpdate(preProps,preState) 更新数据完成之后
      
  2、更新state
      1、shouldComponentUpdate(nextProps,nextState)    要返回一个bool值。true 更新false不更新
      2、componentWillUpdate(nextProps,nextState)  更新数据之前
      3、render
      4、componentDidUpdate(preProps,preState) 更新数据完成之后

1.更新props

<script type="text/babel">
    class Child extends React.Component{

        componentWillReceiveProps(){
            //此钩子只有子组件有
            //当属性发生变化时执行
            console.log("1. componentWillReceiveProps()")
        }

        shouldComponentUpdate(nextProps){
            //必须要有一个返回值bool,true更新,false不更新可以在此处进行
            console.log("2、shouldComponentUpDate","准备更改为："+nextProps.num1,"更改之前："+this.props.num1)
            if(nextProps.num1 >=5)
                return false //后续不会执行
            return true
        }

        componentWillUpdate(nextProps){
            //即将更新之前
            console.log("3","准备更改为："+nextProps.num1,"更改之前："+this.props.num1);
        }
        render() {
            //更改后
            console.log("4 render"+this.props.num1)
            return (
                <div>
                    {this.props.num1} {/*按钮下的数*/}
                    {console.log(this)}
                </div>
            )
        }

        componentDidUpdate(preProps){
            console.log("5、componentWillReceiveProps","preProps.num更改前的值:"+preProps.num1,"this.props.num更改后的值:"+this.props.num1)
        }
    }
    class App extends React.Component{
        constructor() {
            super();
            this.state = {
                num:0
            }
        }
        render(){
            return (
                <div>
                    <button onClick={
                        ()=>{
                            this.setState({
                                num:this.state.num+1
                            })
                        }
                    }>修改num</button>
                    <Child num1={this.state.num}></Child>
                </div>

            )
        }
    }
    ReactDOM.render((
        <App></App>
    ),document.querySelector("#root"));
</script>

2.更新state

强制更新 forceUpdate

<script type="text/babel">
    class App extends React.Component{
        constructor() {
            super();
            this.num=100,
            this.state = {
                num:1
            }
        }
        shouldComponentUpdate(nextProps,nextState){
            console.log("第一个参数"+nextProps,"准备更新"+nextState.num,"更新前"+this.state.num);
            return true
        }
        componentWillUpdate(nextProps,nextState){
            console.log("2.w u d","准备更新"+nextState.num,"更新前"+this.state.num)
        }
        render(){
            return (
                <div>
                    <button onClick={()=>{
                        this.num = 9999;
                        this.forceUpdate();#强制更新
                    }}>
                        {this.num}
                    </button>
                    {
                        /* <button onClick={()=>{
                        this.setState({
                            num:this.state.num+1
                        })
                    }}>{this.state.num}</button>*/
                    }
                </div>
            )
        }
        componentDidUpdate(prePros,preState){
            //更新数据完成后
            console.log("4 更新完成后","更新前的"+preState.num,"更新后的"+this.state.num);
        }
    }
    ReactDOM.render((
        <App></App>
    ),document.querySelector("#root"));
</script>

3.生命周期卸载阶段

<script type="text/babel">
    /*
    * 组件之间的传递参数
    * 父子传值 通过属性
    * 子父传值 通过方法
    *
    * */
    //子组件
    class Clild extends React.Component{
        constructor() {
            super();
            this.state = {
                num:0
            }
        }
        static propTypes ={
            isDisplay:PropTypes.bool.isRequired,
            changeIsDisplay:PropTypes.func.isRequired
        }
        componentWillMount(){
            console.log("加载前")
        }
        render(){
            return(
                <div style={{
                    width:"500px",
                    height:"300px",
                    background:"red"
                }}>
                    {this.state.num}
                    <button onClick={
                        ()=>{
                            this.props.changeIsDisplay(false)
                        }
                    }>隐藏</button>
                </div>
            )
        }

        componentDidMount(){
            console.log("加载后的")
            this.trim = setInterval(()=>{
                console.log(this.state.num);
                this.setState({
                    num:this.state.num+1
                })
            },1000)
        }
        componentWillUnmount(){
            //卸载之前
            console.log("卸载之前执行")
            clearInterval(this.trim);
        }
    }
    class App extends React.Component{
        constructor() {
            super();
            this.state = {
                isDisplay:true,

            }
        }
        changeIsDisplay(isDisplay){
            console.log(111,this);
            this.setState({
                isDisplay
            })
        }

        render(){
            return (
                <div>
                    <button onClick={()=>{
                        this.setState({
                            isDisplay:!this.state.isDisplay
                        })
                    }}>显示与隐藏</button>
                    {
                        this.state.isDisplay && <Clild changeIsDisplay={this.changeIsDisplay.bind(this)} isDisplay={this.state.isDisplay}></Clild>
                    }

                </div>
            )
        }

    }
    ReactDOM.render((
        <App></App>
    ),document.querySelector("#root"))
</script>