react生命周期

1、react生命周期分4个阶段

 

 2、example

import React,{ Component, Fragment } from "react"
import XiaojiejieItem from './XiaojiejieItem'
import './style.css'

class Xiaojiejie extends Component {
  // 生命周期：在某一时刻可以【自动执行】的函数

  // 1、初始化阶段
  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      list: ['基础按摩','精油推背'],
    }
    this.inputChange = this.inputChange.bind(this)
    this.addList = this.addList.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
  }
  //2、组件挂载阶段：3个依次执行：componentWillMount()、render()、componentDidMount()
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    console.log('componentWillMount---组件将要挂载在页面时刻')
  }

  componentDidMount() {
    console.log('componentDidMount----组件挂载完成')
  }

  //3、组件更新阶段
  shouldComponentUpdate(nextProps, nextState) {
    console.log('1-判断是否更新-shouldComponentUpdate')
    return true
    //返回值为布尔值，返回true组件将继续向下执行,返回false将停止继续执行
  }

  //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
  componentWillUpdate(nextProps, nextState) {
    console.log('2-组件即将更新componentWillUpdate')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('4-组件更新完（已经渲染完虚拟DOM）-componentDidUpdate')
  }

  render(){
    console.log('render-----组件挂载中')
    const {inputValue, list} = this.state
    return (
      <Fragment>
        <div>
          <label htmlFor='jspang'>增加服务</label>
          <input 
            id='jspang' 
            className='input' 
            value={inputValue} 
            onChange={this.inputChange}
            ref={input => this.input = input}
          />
          <button onClick={this.addList}>
            增加服务
          </button>
        </div>
        <ul ref={ul => this.ul = ul}>
          {list.map((item, index) => {
            return (
              <XiaojiejieItem key={index+item} content={item} index={index} deleteItem={this.deleteItem}/>        //在父组件中给key值    
            )
          })}
        </ul>
      </Fragment>
    )
  }
  // inputChange(e) {
  //   // react里面更新数据，使用setState()
  //   this.setState({
  //     inputValue: e.target.value
  //   })
  // }

  inputChange() {
    this.setState({
      inputValue: this.input.value
    })
  }

  // 增加列表
  addList() {
    //setState()为异步方法,直接在后面执行console.log()会先执行，再更新数据。
    // 为此为setState()增加第二个回调函数参数，setState()更新完数据，再执行回调函数
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: '',
    },() => {
      console.log(this.ul.querySelectorAll('li').length)
    })
    // console.log(this.ul.querySelectorAll('li').length)
  }
  // 删除列表中某一项：1、<li>需要有点击事件  2、当点击的时候，将该元素的索引传递出去
  deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
      list: list
    })
  }
}
export default Xiaojiejie

import React, { Component } from 'react';

// 父组件向子组件传值，需在子组件引入prop-types校验传值
import PropTypes from 'prop-types'

class XiaojiejieItem extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
  //组件第一次存在于DOM中（第一次渲染子组件时），该函数不会被执行；如果已经存在于DOM中，函数才会被执行
  componentWillReceiveProps(nextProps) {
    console.log('child-componentWillReceiveProps')
  }

  componentWillUnmount(){
    console.log('child-componentWillUnmount')
  }

  render() { 
    return ( 
      <li onClick={this.handleClick}>
        {this.props.avname}-为你做-{this.props.content}
      </li>
     );
  }
  handleClick(){
    this.props.deleteItem(this.props.index)
  }
}
//进行属性类型的校验
XiaojiejieItem.propTypes = {
  //父组件都传递了哪些值
  content: PropTypes.string,
  index: PropTypes.number,
  deleteItem: PropTypes.func,
}

//不传递属性时，该属性设置一个默认值；
XiaojiejieItem.defaultProps = {
  avname: 'xiaohong'
}
 
export default XiaojiejieItem;

3、（1）新载入页面(分别依次自动执行挂载阶段的三个生命周期函数)

（2）更新阶段：增加服务（脚底按摩）

其已、componentWillReceiveProps()函数应用于子组件，组件第一次存在于DOM中（第一次渲染子组件时），该函数不会被执行；如果已经存在于DOM中，有数据更新，函数才会被执行；目前已经被新的生命周期函数getDerivedStateFromProps()代替。

其二、shouluComponentUpdate()返回值必须为boolean值

[HMR] Waiting for update signal from WDS...
Xiaojiejie.js:22 componentWillMount---组件将要挂载在页面时刻
Xiaojiejie.js:46 render-----组件挂载中
Xiaojiejie.js:26 componentDidMount----组件挂载完成

Xiaojiejie.js:31 1-判断是否更新-shouldComponentUpdate
Xiaojiejie.js:38 2-组件即将更新componentWillUpdate
Xiaojiejie.js:46 render-----组件挂载中
XiaojiejieItem.js:15 child-componentWillReceiveProps
Xiaojiejie.js:42 4-组件更新完（已经渲染完虚拟DOM）-componentDidUpdate

Xiaojiejie.js:94 3

（3）卸载子组件---删除基础按摩：子组件卸载之前，调用componentWillUnmount()函数。