142、Reactjs 组件的更新机制

import React from 'react'

// prop-types包中职能很单一，只提供了一些常见的数据类型，用于做类型校验
import ReactTypes from 'prop-types'

//封装组件的目的，是为了团队协作开发更加方便，
//有的人只负责开发组件，
//有的人只负责调用别人开发好的组件 
//最好在封装组件的时候，为组件中的一些必要数据，进行一个类型的校验
export default class Counter extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            msg: 'ok',
            count: props.initcount,   //基数，把外界传递过来的initcount赋值给state中的count值,
            //这样，就把count值改成了可读可写的state属性，今后就能实现点击按,count值+1的需求了
        }
    }



    static defaultProps = {
        initcount: 0
    }

    //创建一个静态的propTypes对象，在这个对象中，可以把外界传过来的属性，做类型校验
    static propTypes = {
        initcount: ReactTypes.number  //使用prop-types包来定义initcount为number类型
    }


    //在组件即将挂载到页面上的时候执行，此时，组件尚未挂载到页面中呢
    //虚拟DOM是否创建好了呢？此时，虚拟内存中的虚拟DOM也还没有开始创建呢
    // componentWillMount() {//这个函数，等同于vue中的created生命周期函数

    //     //此时，无法获取到页面上的任何元素，因为 虚拟DOM和页面都还没有开始渲染呢
    //     //在这个阶段中，不能去操作页面上的DOM元素
    //     // console.log(document.getElementById("myh3"))


    //     // console.log(this.props.initcount)

    //     // console.log(this.state.msg)
    //     this.myselfFunc()
    // }

    // componentDidMount() {

    //     //在这个函数中，我们可以放心的去操作页面上你需要使用的DOM元素
    //     //如果我们想操作DOM元素，最早，只能在componentDidMount中进行
    //     //相当于Vue中的mounted函数
    //     // console.log(this.props.id)

    //     document.getElementById('btn').onclick = () => {

    //         this.setState({
    //             count: this.state.count + 1
    //         })

    //     }

    // }


    //从这里开始就进入到了组件的运行中状态
    //判断组件是否需要更新
    shouldComponentUpdate(nextProps, nextState) {
        //1、在shouldComponentUpdate中要求必须返回一个布尔值
        //2、在shouldComponentUpdate中，如果返回的值是false,则不会继续执行后续的生命周期函数，而是直接退回到了运行中的状态
        //   此时由于后续的render函数并没有被调用，因此，页面不会被更新，但是，组件的state状态，却被修改了
        //   return false
        //   需求，如果state中的count值是偶数，则更新页面，如果count值是奇数，则不更新页面，我们想要的页面效果:4,6,8,10,12....

        // 经过打印测试发现，在shouldComponentUpdate中，通过this.state.count拿到的值，是上一次的旧数据，并不是当前最新的
        // console.log(this.state.count + '----' + nextState.count)

        return true
    }


    // 组件将要更新，此时尚未更新，在进入这个生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的DOM元素也是旧的
    componentWillUpdate() {

        // 经过打印分析，得到，此时页面上的DOM节点，都是旧的，应该谨慎操作，因为你可能操作的是旧的DOM
        // console.log(document.getElementById('myh3').innerHTML)
        console.log(this.refs.h3.innerHTML)
    }

    // 组件完成了更新，此时，state中的数据，虚拟DOM,页面上的DOM都是最新的，
    // 此时，你可以放心大胆的去操作界面了

    componentDidMount(){
        console.log(this.refs.h3.innerHTML)


    }



    //当执行到这个生命周期函数的时候，即将要开始渲染内存中的虚拟DOM了，当这个函数执行完，内存中就有了一个
    //渲染好的虚拟DOM，但是，页面上尚未真正显示DOM元素呢
    render() {

        //在組件运行阶段中，页面上的DOM元素，还是之前旧的
        console.log(this.refs.h3 && this.refs.h3.innerHTML);

        //在return 之前,虚拟DOM还没有开始创建，页面上也是空的，根本拿不到任何的元素

        return <div>

            <h1>这是Counter计数器组件</h1>
            <input type="button" value="+1" id="btn" onClick={this.increment} />
            <hr />
            <h3 id="myh3" ref="h3" >当前的数量是:{this.state.count}</h3>

        </div>

        //当return 执行完毕后，虚拟DOM创建好了，但是，也还没有挂载到真正的页面中

    }

    increment = () => {
        this.setState({
            count: this.state.count + 1
        })
    }







}