react生命周期（新/旧）

react生命周期是什么

就是react从创建-状态更新-销毁这三者之间都有哪些生命周期

1.生命周期(旧)挂载流程

class Mycomponent extends React.Component{
        //构造器
        constructor(){
            super();
            console.log('--------------constructor-----------------')
        }
        //组件挂载前执行的钩子函数
        UNSAFE_componentWillMount() {
            console.log('--------------------componentWillMount----------------')
        }
        // 组件挂载后执行的钩子函数
        componentDidMount() {
            console.log('--------------------componentDidMount----------------')
        }
        //组件卸载前执行的钩子
        componentWillUnmount(){
            console.log('-------------------componentWillUnmount---------------------')
        }



        Myunmount = ()=>{
            //卸载容器中的所有组件
            ReactDOM.unmountComponentAtNode(document.querySelector("#app"))
        }

        render(){
            console.log('---------------------render---------------')
            return (
                <div>
                    <h1>哈哈哈</h1>
                    <button onClick={this.Myunmount}>卸载</button>
                </div>
            )
        }

    }
    ReactDOM.render(<Mycomponent/>,document.querySelector('#app'))

2.生命周期(旧)更新流程

class Mycomponent extends React.Component{
        //构造器
        constructor(){
            super();
            console.log('--------------constructor-----------------')
        }
        //组件挂载前执行的钩子函数
        UNSAFE_componentWillMount() {
            console.log('--------------------componentWillMount----------------')
        }
        // 组件挂载后执行的钩子函数
        componentDidMount() {
            console.log('--------------------componentDidMount----------------')
        }
        //组件卸载前执行的钩子
        componentWillUnmount(){
            console.log('-------------------componentWillUnmount---------------------')
        }

        // 控制更新的阀门    返回值为true  正常更新    返回值为false 不更新
        shouldComponentUpdate(nextProps, nextState) { 
            console.log(nextProps,nextState)
            console.log('--------------------shouldComponentUpdate------------------')
            return false;
        }

        //组件更新前
        UNSAFE_componentWillUpdate(nextProps, nextState) {
            console.log(nextProps,nextState)
            console.log('-----------------------UNSAFE_componentWillUpdate-----------------')
        }
        //组件更新后
        componentDidUpdate(prevProps, prevState) {
            console.log(prevProps,prevState)
            console.log('--------------------componentDidUpdate----------------------')
        }
        //组件卸载
        Myunmount = ()=>{
            //卸载容器中的所有组件
            ReactDOM.unmountComponentAtNode(document.querySelector("#app"))
        }
        //计数方法
        countNum = ()=>{
            let newNum = this.state.num;
            this.setState({num:++newNum})
        }
        //强制更新
        forceUp= ()=>{
        	/*生命周期强制更新，这是组件内置方法*/
            this.forceUpdate()
        }
        state = {num:1}
        render(){
            console.log('---------------------render---------------')
            return (
                <div>
                    <h1>哈哈哈</h1>
                    <p>计数工具:{this.state.num}</p>
                    <button onClick={this.countNum}>计数</button>
                    <button onClick={this.Myunmount}>卸载</button>
                    <button onClick={this.forceUp}>强制更新</button>
                </div>
            )
        }

    }
    ReactDOM.render(<Mycomponent/>,document.querySelector('#app'))

4.生命周期(新)挂载流程

class Myparent extends React.Component{
        constructor(){
            super()
            console.log('-----------------constructor----------------')
        }
        // 当前组件中的state中的数据永远取决去props值时  使用getDerivedStateFromProps
        static getDerivedStateFromProps(props, state) {
            console.log(props,state)
            console.log('------------------getDerivedStateFromProps-----------------')
            return null;
        }
        componentDidMount() {
            console.log('-------------componentDidMount-------------------')
        }

        //组件卸载
        Myunmount = ()=>{
            //卸载容器中的所有组件
            ReactDOM.unmountComponentAtNode(document.querySelector("#app"))
        }
        //计数方法
        countNum = ()=>{
            let newNum = this.state.num;
            this.setState({num:++newNum})
        }
        //强制更新
        forceUp= ()=>{
            this.forceUpdate()
        }
        state = {num:1}
        render(){
            console.log('---------------------render---------------')
            return (
                <div>
                    <h1>我是父组件</h1>
                    <p>计数工具:{this.state.num}</p>
                    <button onClick={this.countNum}>计数</button>
                    <button onClick={this.Myunmount}>卸载</button>
                    <button onClick={this.forceUp}>强制更新</button>
                </div>
            )
        }
    }
    ReactDOM.render(<Myparent/>,document.querySelector('#app'))

5.生命周期(新)更新流程

class Myparent extends React.Component{
        constructor(){
            super()
            // console.log('-----------------constructor----------------')
        }
        // 当前组件中的state中的数据永远取决去props值时  使用getDerivedStateFromProps
        // static getDerivedStateFromProps(props, state) {
        //     // console.log(props,state)
        //     console.log('------------------getDerivedStateFromProps-----------------')
        //     return null;
        // }
        // componentDidMount() {
        //     console.log('-------------componentDidMount-------------------')
        // }

        //组件卸载
        Myunmount = ()=>{
            //卸载容器中的所有组件
            ReactDOM.unmountComponentAtNode(document.querySelector("#app"))
        }
        //计数方法
        countNum = ()=>{
            let newNum = this.state.num;
            this.setState({num:++newNum})
        }
        //强制更新
        forceUp= ()=>{
            this.forceUpdate()
        }
        state = {num:1}
        render(){
            // console.log('---------------------render---------------')
            return (
                <div>
                    <h1>我是父组件</h1>
                    <p>计数工具:{this.state.num}</p>
                    <button onClick={this.countNum}>计数</button>
                    <button onClick={this.Myunmount}>卸载</button>
                    <button onClick={this.forceUp}>强制更新</button>
                    <Myson count={this.state.num}/>
                </div>
            )
        }
    }



    class Myson extends React.Component{
        state = {count:1}
        // 当state数据 完全取决去 props值 时  使用  getDerivedStateFromProps    静态方法
        static getDerivedStateFromProps(props, state) {
            console.log(props,state)
            console.log('------------------getDerivedStateFromProps-----------------')
            return state;    
        }
        // 控制更新的阀门    返回值为true  正常更新    返回值为false 不更新
        shouldComponentUpdate(nextProps, nextState) { 
            console.log(nextProps,nextState)
            console.log('--------------------shouldComponentUpdate------------------')
            return true;
        }
        //组件更新后
        componentDidUpdate(prevProps, prevState) {
            console.log(prevProps,prevState)
            console.log('--------------------componentDidUpdate----------------------')
        }
        render(){
            console.log('---------------------render---------------')
            return (
                <div>
                    <h1>我是子组件</h1>
                    <h1>接受父组件传递的数值:{this.state.count}</h1>
                </div>
            )
        }
    }
    ReactDOM.render(<Myparent/>,document.querySelector('#app'))