JSX组件计数器看React生命周期函数

电玩女神 2022-03-01 09:12 162阅读 0赞

### JSX ###

JSX：能够让我们在JS文件中，书写类似于HTML代码；快速定义DOM虚拟结构；JSX内部运行时，并不是直接把我们的html代码渲染到页面；而是先转换为React.createElement这样的JS代码在渲染到页面上；JSX是对程序员友好的语法糖。

> JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

下面这两个代码作用是完全一样的

const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );

const element = React.createElement(
      'h1',
      { className: 'greeting'},
      'Hello, world!'
    );

### 在webpack使用React ###

[这里有webpack基本的配置和React相关解释][webpack_React]

### 定义一个counter.jsx组件 ###

1.  每个class内部定义都有一个构造器constructor，如果没有显示定义的构造器，那么类内部默认有个看不见的constructor
2.  每当使用new关键字创建class类实例的时候，必然会优先调用constructor构造器
3.  使用extends继承，必须使用super()方法，表示父类constructor的引用

import React from 'react'
    export default class Counter extends React.Component { 
        constructor(props){ 
            super(props)
        }
    }

引入或则渲染该组件(页面定义了一个容器`<div id="app"> </div>`)

import React from 'react'
    import ReactDom from 'react-dom'
    ReactDom.render(<div><Counter initcount={ 0}></Counter></div>,document.querySelector('#app'))

### 在JSX组件使用生命周期函数 ###

![React官网上的生命周期函数图][React]

### 第一步:自定义属性 ###

**static defaultProps**这是初始化属性默认值，防止组件中某些必须的属性，外界中没有传递而报错的情况  
JSX组件内部,虽然我们这里有传入initcount，但为了防止没有传入，在counter组件内部定义一下

export default class Counter extends React.Component { 
        constructor(props){ 
    		......
            }
        }
       // 使用静态的defaultProps来设置必需的默认值
        static defaultProps = { 
            initcount: 0
        }
    }

**static propTypes**创建一个静态的propTypes对象，在这个对象；可以把传递过来的属性做类型校验  
在v.15之后，官方把类型校验的模块单独抽离出来成一个包prop-types,需要安装并引入

cnpm i  prop-types -S
    import ReactTypes from 'prop-types'

static defaultProps = { 
    ...
        }
    static propTypes = { 
        initcount: ReactTypes.number //定义initcount为Number类型
     }

### 第二步：构造器 ###

1.  constructor:每个class内部都有一个定义的构造器，如果没有显示的定义的构造器。那么内部会默认一个。每当使用关键字new创建class类的时候，必然会调用构造器
2.  使用extends，必须使用super()，表示对父类的引用

constructor(props){ 
            super(props)
            this.state = { 
                msg:'ok',
                count:props.initcount
            }
        }

1.  当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。
2.  把外界传递过来的数据initcount赋值给count，保存在state里面，这样就变成可读可写的了，接下来我们才能改变值进行计数

### 第三步：componentWillMount() ###

**componentWillMount**字面意思理解：组件将要被挂载。此时，虚拟DOM还没被创建，也没有挂载到页面上。也就是我们在操作时：无法获取页面上新的DOM元素，获取的可能是旧；因为虚拟DOM和页面都没开始渲染

static propTypes = { 
        ....
     }
    componentWillMount(){ 
       console.log('数据'+this.state.count)
    }

### 第四步：render() ###

**render** render函数执行的时候，就要开始渲染虚拟DOM了；执行完，虚拟DOM也在页面渲染好了，但此时还没有挂载到真正的页面  
我们return一个计数组件，但在return之前也是拿不到任何元素，因为虚拟DOM没有创建；也不要使用setState，会陷入死循环

// 虚拟DOM还没有创建
        componentWillMount(){ 
            console.log(this.refs.h2)//undefined
        }
        render(){ 
            console.log(this.refs.h2) //undefined
            return <div>
                <h1>这是计数器组件</h1>
                <button onClick={ this.increment}>进行加1</button>
                <h2 ref="h2">{ this.state.count}</h2>
            </div>
        }
        increment = ()=>{ 
            this.setState({ 
                count:this.state.count + 1
            })
        }

![点击按钮两次的变化][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

### 第五步:componentDidMount() ###

**componentDidMount**表示组件完成了挂载。此时内存中的虚拟DOM和浏览器的页面，以及state上的数据已经保持一致了.在操作上：可以操作页面的任意元素，也是最早可以操作的生命钩子

componentDidMount(){ 
            console.log(document.querySelector('h2'))
        }

--------------------

上面主要是组件的创建，接下来看一下组件的运行阶段

--------------------

### 第一步：shouldComponentUpdate() ###

1.  当组件的state发生改变时
2.  当props发生改变时，触发componentWillReceiveProps，此时该函数要接收新的属性，只有父组件为当前组件传递新的属性,即外界传递给子组件的值被修改了  
    **shouldComponentUpdate**此时组件尚未更新。但是state和props的值肯定是最新的。在该组件还需要返回一个布尔值，如果是true，执行后续的生命周期函数，如果是false：直接退回到运行中的状态，页面不是最新的，但是state的状态是最新的

shouldComponentUpdate(nextProps, nextState){ 
            console.log('state未更新:'+this.state.count+'-state最新值:'+nextState.count)
            console.log(nextProps.initcount)//这个时候外界并没有修改props
            return false
        }

点击按钮时打印的结果  
![产生的结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]  
可能大家看到页面并没有更新，是因为我们在shouldComponentUpdate返回了false，所以并没有调用render函数

### 第二步：componentWillUpdate() ###

**componentWillUpdate**组件将要被更新；内存上的DOM是旧的，所以页面上的元素也是旧的

shouldComponentUpdate(nextProps, nextState){ 
        ......
            return true
        }
        componentWillUpdate(){ 
            console.log('组件将要更新：'+this.refs.h2.innerHTML)
        }

![看一下数据的变化][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]

### 第三步:render() ###

**render**此时的DOM树和state保持一致，都是新的，但是页面还是旧的

### 第四步:componentDidUpdate() ###

**componentDidUpdate**组件完成了更新，页面也是最新的

componentDidUpdate(){ 
            console.log(this.refs.h2.innerHTML)
        }

--------------------

组件的运行阶段主要是根据state和props的改变，接下来是组件的销毁阶段

--------------------

### 卸载:componentWillUnMount() ###

组件尚可被使用，还没有真正卸载

### 总结 ###

1.  在组件的创建，在加载到页面上运行，以及组件被销毁的过程中，总伴随着各种各样的事件，这些组件在特定时期触发的事件。叫做生命周期
2.  组件生命周期分为三个部分：组件创建阶段，组件运行阶段，组件销毁阶段
3.  正确使用setState()
    
     *  不要直接更新状态，如果直接使用`this.state.initcount+=1`,那么则不会重新渲染组件
     *  状态更新可能是异步的，this.props 和 this.state 可能是异步更新的，不应该依靠它们的值来计算下一个状态。要修复它，使用setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态`this.setState(function(prevState, props) { return { count prevState.count + 1 } })`作为第一个参数，将此次更新被应用时的props做为第二个参数
     *  状态更新合并
4.  生命周期函数调用的次数  
    ![生命周期函数触发][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]

[webpack_React]: https://blog.csdn.net/weixin_41105030/article/details/88691860
[React]: /images/20220301/d2584244c161467d8c9413e638f3a88e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220301/652918f883974fd381627d4b5653a273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220301/650ea0f7bb444d948d5b9c95970867d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220301/b8dcfd41ff914ce5bc85aa92c04f6cb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 3]: /images/20220301/657cdc098fee48e8b8366b7033120036.png