前端学习笔记四十-移动APP（4）React组件的生命周期

作者: AizawaSayo | 来源:发表于2020-03-05 21:58 被阅读0次

一、组件的生命周期

1.概念：

在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；

2.组件生命周期分为三部分：

组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；

componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM，此时props和state中的数据都能获取到。
render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了
componentDidMount: 组件完成了挂载(挂载即把虚拟DOM树显示到页面上)，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入了运行中的状态

组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；

componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；
shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的
componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的
render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的
componentDidUpdate: 此时，页面又被重新渲染了，state 和虚拟DOM 和页面已经完全保持同步

组件销毁阶段：也有一个显著的特点，一辈子只执行一次；

componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

vue中的生命周期图
 React Native 中组件的生命周期

React中组件的生命周期 - 详解

3.defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：

React生命周期表格

4.组件生命周期的执行顺序：

Mounting：

constructor()
componentWillMount()
render()
componentDidMount()

Updating：

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

Unmounting：

componentWillUnmount()

二、通过Counter计数器的小案例 - 了解生命周期函数

给组件设置默认属性：

  // 在封装一个组件的时候，组件内部，肯定有一些数据是必须的，哪怕用户没有传递一些相关的启动参数，这时候，组件内部 ，尽量 给自己提供一个默认值；
  // 在 React 中，使用静态的 defaultProps 属性，来设置 组件的 默认属性值；
  static defaultProps = {
    initcount: 0 // 如果外界没有传递 initcount，那么，自己初始化一个 数值，为0
  }

给属性进行类型校验，需要先运行cnpm i prop-types --save

  // 注意： prop-types 包中职能跟单一，只提供了 一些常见的 数据类型，用于做类型校验
  import ReactTypes from 'prop-types'
  // 这是创建一个 静态的 propTypes 对象，在这个对象中，可以把 外界传递过来的属性，做类型校验；
  // 注意： 如果要为 传递过来的属性做类型校验，必须安装 React 提供的 第三方包，叫做 prop-types ;
  // prop-types 大概在 v.15.* 之前，并没有单独抽离出来，那时候，还和 react 包 在一起；后来， 从 v.15.* 之后，官方把类型校验的 模块，单独抽离为 一个包，就叫做 prop-types
  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  }

组件初始化时生命周期事件总结

componentWillMount：等同于Vue中的created生命周期函数。此时，props和state中的数据都能获取到。但无法获取到页面上的任何元素，因为虚拟DOM和页面都还没有开始渲染。【在这个阶段中，不能去操作页面上的DOM元素】
render：即将要开始渲染内存中的虚拟DOM，当 return 执行完毕后，虚拟DOM创建好了，但是只是存在于内存中，还没有挂载到真正的页面中。
componentDidMount：相当于 Vue 中的 mounted 函数。当组件挂载到页面上之后，就是进入这个生命周期函数了，页面上已经有可见的DOM元素了。组件就就进入到了运行中的状态。如果我们想操作DOM元素，最早只能在 componentDidMount 中进行；

通过原生的方式获取元素并绑定事件

componentDidMount() {
    document.getElementById('btn').onclick = () => {
      // console.log(this);
      // this.props.initcount++
      this.setState({
        count: this.state.count + 1
      })
    } 
  }

React中使用ref属性获取DOM元素引用

和 Vue 中差不多，vue 为页面上的元素提供了 ref 的属性，如果想要获取元素引用，则需要使用this.$refs.引用名称

在 React 中，也有 ref, 如果要获取元素的引用this.refs.引用名称

<h3 id="myh3" ref="h3">当前的数量是：{this.state.count}</h3>

componentWillUpdate() {
    console.log(document.getElementById('myh3').innerHTML)
    console.log(this.refs.h3.innerHTML);
  }

使用React中的事件，绑定count自增

<input type="button" value="+1" id="btn" onClick={this.increment} />

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

组件运行中事件的总结对比

componentWillReceiveProps：当组件第一次被渲染到页面上的时候，不会触发这个函数；只有当父级通过某些事件，重新修改了传递给该组件的 props 数据之后，才会触发这个函数。这时如果使用 this.props 来获取的属性值不是最新的，是上一次的旧属性值；最新的属性值需要通过参数列表来获取。nextProps参数表示组件将要接收外界传递过来的新的 props 属性值。
shouldComponentUpdate：必须返回一个布尔值，如果返回的值是 false，则不会继续执行后续的生命周期函数，而是直接退回到了运行中的状态，此时由于后续的 render 函数并没有被调用，因此页面不会被更新，但是，组件的 state 状态却被修改了；
componentWillUpdate：组件将要更新但尚未更新，内存中的虚拟DOM是旧的，页面上的DOM 元素也是旧的。应该慎重操作，因为你可能操作的是旧DOM。
render：在组件运行阶段中，每当调用 render 函数的时候，页面上的 DOM元素，还是之前旧的。在render函数中，不能调用setState()方法，因为会陷入死循环（数据被修改又要重新更新组件，又会进入render函数）。
componentDidUpdate：组件完成了更新，此时state 中的数据、虚拟DOM、页面上的DOM，都是最新的，此时，你可以放心大胆的去操作页面了

三、绑定this并传参的三种方式

在事件中绑定this并传参：每次调用都要bind绑定this

    //React中驼峰方式绑定事件的js中this指向组件实例
    <input type="button" value="在事件中绑定this并传参" onClick={this.handleMsg1.bind(this, '🍕', '🍟')} />

    // 在事件中绑定this并传参
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此时this是个null
        this.setState({
            msg: '在事件中绑定this并传参：' + arg1 + arg2
        });
    }

在构造函数（constructor中）中绑定this并传参:调用的时候不用再手动绑定

    // 修改构造函数中的代码：
    //当为一个函数调用 bind 改变了this指向后，bind 函数调用后有一个返回值，就是被改变this指向后的函数的引用；bind 不会修改 原函数的 this 指向，因此需要把返回值重新赋值给原函数
    this.handleMsg2 = this.handleMsg2.bind(this, '🚗', '🚚');

    <input type="button" value="在构造函数中绑定this并传参" onClick={this.handleMsg2} />

    // 在构造函数中绑定this并传参
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在构造函数中绑定this并传参：' + arg1 + arg2
        });
    }

用箭头函数绑定this并传参：

    <input type="button" value="用箭头函数绑定this并传参" onClick={() => { this.handleMsg3('👩', '👰') }} />

    // 用箭头函数绑定this并传参
    handleMsg3(arg1, arg2) {
        this.setState({
            msg: '用箭头函数绑定this并传参：' + arg1 + arg2
        });
    }

注意，在React中DOM绑定事件不能赋值为一个函数的调用，如onClick={this.handleMsg('arg')}，因为React执行到此会直接执行这个调用，只能赋值为一个函数

四、绑定文本框与state中的值

在Vue.js中，默认可以通过v-model指令，将表单控件和我们的data上面的属性进行双向数据绑定，数据变化和页面之间的变化是同步的！
在React.js中，默认没有提供双向数据绑定这一功能，默认只能把state之上的数据同步到界面的控件上，但是不能默认实现把界面上数据的改变，同步到state之上，需要程序员手动调用相关的事件来进行逆向的数据传输！
绑定文本框和state的值：

    {/*只要将value属性，和state上的状态进行绑定，那么这个表单元素就变成了受控表单元素，这时如果没有调用相关的事件，是无法手动修改表单元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 这是文本框内容改变时候的处理函数
    handleTextChange = (e) => {
        this.setState({
            //msg: e.target.value
            msg: this.refs.txt.value
        });
    }

注意setState的一个问题：

// setState在保存的时候是异步地进行保存的，所以如果想要获取最新的，刚刚保存的那个状态，需要通过回掉函数的形式去获取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 获取最新的state状态值
    console.log(this.state.msg);
});

五、发表评论案例

CMTList组件

import React from 'react'
import CMTItem from './CmtItem.jsx'
import CMTBox from './CmtBox.jsx'

// 评论列表组件
export default class CMTList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { user: 'zs', content: '123' },
        { user: 'ls', content: 'qqq' },
        { user: 'xiaohong', content: 'www' }
      ]
    }
  }

  // 在组件尚未渲染的时候，就立即 获取数据
  componentWillMount() {
    this.loadCmts()
  }

  render() {
    return <div>
      <h1>这是评论列表组件</h1>

      {/* 发表评论的组件 */}
      {/* 相对于 Vue 中，把 父组件传递给子组件的 普通属性 和 方法属性，区别对待， 普通属性用 props 接收， 方法 使用 this.$emit('方法名') */}
      {/* react 中，只要是传递给 子组件的数据，不管是 普通的类型，还是方法，都可以使用 this.props 来调用 */}
      <CMTBox reload={this.loadCmts}></CMTBox>

      <hr />

      {/* 循环渲染一些评论内容组件 */}
      {this.state.list.map((item, i) => {
        return <CMTItem key={i} {...item}></CMTItem>
      })}
    </div>
  }

  // 从本地存储中加载 评论列表
  loadCmts = () => {
    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
    this.setState({
      list
    })
  }
}

CMTItem组件

import React from 'react'

// 评论列表项组件
export default class CMTItem extends React.Component {

  render() {
    return <div style={{ border: '1px solid #ccc', margin: '10px 0' }}>
      <h3>评论人：{this.props.user}</h3>
      <h5>评论内容：{this.props.content}</h5>
    </div>
  }
}

CMTBox组件

import React from 'react'

// 评论列表框组件
export default class CMTBox extends React.Component {

  render() {
    return <div>
      <label>评论人：</label><br />
      <input type="text" ref="user" /><br />
      <label>评论内容：</label><br />
      <textarea cols="30" rows="4" ref="content"></textarea><br />

      <input type="button" value="发表评论" onClick={this.postComment} />
    </div>
  }

  postComment = () => {
    // 1. 获取到评论人和评论内容
    // 2. 从 本地存储中，先获取之前的评论数组
    // 3. 把 最新的这条评论，unshift 进去
    // 4. 在把最新的评论数组，保存到 本地存储中
    var cmtInfo = { user: this.refs.user.value, content: this.refs.content.value }
    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
    list.unshift(cmtInfo)
    localStorage.setItem('cmts', JSON.stringify(list))

    this.refs.user.value = this.refs.content.value = ''

    this.props.reload()
  }
}

六、扩展

context特性

父组件

  // 1. 在 父组件中，定义一个固定名称的function，叫做 getChildContext ，内部必须返回一个对象，就是要共享给 所有子孙自建的 数据
  getChildContext() {
    return {
      color: this.state.color
    }
  }

  // 2. 使用属性校验，规定一下传递给子组件的数据类型， 需要定义一个静态的（static） childContextTypes（固定名称，不要改）
  static childContextTypes = {
    color: ReactTypes.string // 规定了 传递给子组件的 数据类型
  }

子孙组件：先进行属性校验，再通过 this.context.属性名直接使用

  // 3. 上来之后，先来个属性校验，去校验一下父组件传递过来的参数类型
  static contextTypes = {
    color: ReactTypes.string // 这里，如果子组件想要使用父组件通过 context 共享的数据，那么在使用之前，一定要先做一下数据类型校验
  }

  render() {
    return <div>
      <h5 style={{ color: this.context.color }}>这是 孙子组件  ---  {this.context.color} </h5>
    </div>
  }

记住一串单词组合getChildContextTypes
父组件：前3个单词（方法）、后3个单词（静态属性）
子孙组件：后两个单词（静态属性）

类型校验
 Animation Add-Ons