react的生命周期函数

1.初始化阶段

componetWillMount: render 之前最后一次修改状态的机会
render:只能访问 this.props 和 this.state 不允许修改状态和DOM输出
componetDidMount： 成功render并渲染完成真实DOM之后出发，可以修改dom

import React, { Component } from 'react'
export default class app extends Component {
    state = {
        name: "huanhuan"
    }
    UNSAFE_componentWillMount () {
        console.log('will mount',this.state.name,document.getElementById('name'));
        //第一次上树前最后一次修改状态机会
        this.setState({  name: "HUANHUAN" })

        //初始化数据的作用
    }
    componentDidMount() {
        console.log('did mount',this.state.name,document.getElementById('name'));
        //数据请求axios
        //订阅函数调用
        //setInterval
        // 基于创建的完的dom进行 初始化,,,,,, BetterScroll
        this.setState({  name: "HUANHUAN1" })
    }
    render() {
      console.log('render')
    return (
        <div id="name">{this.state.name }</div>
    )
  }
}

import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
export default class app extends Component {
    state = {
        list: [
           "111","222","333","444","555","666","777","888","999","000","121","122","123","124","125"
       ]
    }
    componentWillMount() {
        console.log(document.querySelectorAll("li"))
    }
    componentDidMount() {
        new BetterScroll("#wapper")
    }
    
    render() {
      console.log('render')
        return (
            <div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
                <ul>
                    {this.state.list.map(item => <li key={item} > {item}</li>)} 
                </ul>
            </div>
        )
            }
   
    // UNSAFE_componentWillUpdate() {
    //     console.log('componentwillUpdate',document.getElementById('name').innerHTML);
    // }
    componentDidUpdate(prevProps,prevState) {
        console.log('componentdidUpdate', document.getElementById('name').innerHTML);
        
        console.log(prevProps.list)

        if (prevState.list.length ===0) {
            new BetterScroll("#wapper")

        }

    }
}

2.运行中阶段

componentWillReceiveProps: 父组件修改属性触发
shouldComponentUpdate: 返回false会组织render调用
componentwillUpdate: 不能修改属性和状态
render：只能访问this.props 和 this.state 不允许修改状态和DOM输出
compoenetDidUpdate: 可以修改DOM

import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
import Axios from 'axios'
export default class app extends Component {
    state = {
        list: [],
        text:"huanhuan"
    }
    componentDidMount() {

        Axios.get('./test.json').then((res) => {
            console.log("componentDidMount")
            this.setState({list: res.data[2].list})
        })
    }
    
    render() {
        console.log('render')
        return (
            <div>
                <span >{this.state.text}</span><button onClick={() => { this.setState({ "text": "HUANHUAN" }) }}>点击</button>
                <div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
                    <ul>
                            { this.state.list.map((item,index)=><li key={index}> {item.name}</li> )} 
                    </ul>
                    </div>
                </div>
        )
      }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevState)
        if (prevState.list.length === 0) {
            new BetterScroll("#wapper")
        }
            
       
    }
}

import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
import Axios from 'axios'
export default class app extends Component {
    state = {
        list: [],
        text: "huanhuan",
        num:0
    }
    componentDidMount() {

        Axios.get('./test.json').then((res) => {
            console.log("componentDidMount")
            this.setState({list: res.data[2].list})
        })
    }
    
    render() {
        console.log('render')
        return (
            <div>
                <span >{this.state.text}</span><button onClick={() => { this.setState({ "text": "xiaolong" }) }}>点击</button>
                <div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
                    <ul>
                            { this.state.list.map((item,index)=><li key={index}> {item.name}</li> )} 
                    </ul>
                    </div>
                </div>
        )
    }
   //scu
    shouldComponentUpdate(nextProps, nextState) {
        if (JSON.stringify(this.state.text) !== JSON.stringify(nextState.text)) {
            return true
        }
        return false
    }
  
    componentDidUpdate(prevProps, prevState) {
        console.log(prevState)
        if (prevState.list.length === 0) {
            new BetterScroll("#wapper")
        } else if (this.state.num == 0) {
            new BetterScroll("#wapper")
        }
            
       
    }
}

import React, { Component } from 'react'

class Child extends Component {
    state = {
        title:""
    }
  
    render() {
        console.log('render1')
        console.log(this.state.title)
        return (
            <div>
                {this.props.text}
                {this.state.title}
          </div>
      )      

    }
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps)
        this.setState({title: nextProps.text+"huanhuan"})
        //最先获取父组件传来的属性，可以利用属性进行ajax或者逻辑处理
        //把属性转化为孩子自己的状态
       
    }
}
export default class app extends Component {
    state = {
        text:'123123'
    }
    render() {
      console.log('render2')
      
    return (
        <div>
            {this.state.text}
            <button onClick={() => this.setState({text:"2222"})} >点击</button>
          <Child text={this.state.text}/>
      </div>
    )
  }
}
    

3. 销毁阶段

componentWillUnmount: 在删除组件之前进行清理操作，比如计时器和事件监听器

import React, { Component } from 'react'
export default class app extends Component {
    state = {
        show: true
    }
    render() {
        console.log('render2')
        return (
            <div>
                <button onClick={() => this.setState({ show: false})}>点击</button>
              {this.state.show && <Child />}  
            </div>
        )
    }
    
}
class Child extends Component {
   
    render() {
        return (
            <div>
                Child
            </div>
        )
    }
    componentDidMount() {
        window.onresize = () => {
            console.log('resize')
        }
        this.timer = setInterval(() => {
            console.log('setInterval')
        },1000)

    }
    componentWillUnmount() {
        console.log('compomentWillUnmount')
        window.onresize = null
       clearInterval(this.timer)
        
    }
}