React生命周期讲解

1. 先上图

2. 其实总结就是 进入当前页面，，然后渲染页面，加载数据，渲染demo，数据更新，组件卸载

3. constructor

/*
* constructor 其实是Es6 里面带的一个属性，代表初始化，但是组件未挂载
* constructor的固定写法如下
* 比如你react 需要定义一些 
* State 的值就可以定义在 constructor里面，这个是一个很好的习惯
*/
import React, { Component } from 'react';
 class APP extends Component {

  constructor(props) {
    super(props);
    this.state = {
    counter: 0,
  }
  }
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}

export default APP;

4 componentWillMount

/*
* 组件初始化时只调用，
* 以后组件更新不调用，
* 整个生命周期只调用一次，此时可以修改state
*/

import React, { Component } from 'react';

class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    date: new Date()
    }
  }
  /*
  * 这个就是组件初始化创建的时候才会执行的方法
  * 并且只会执行一次，此时可以去修改 State里面的值
  * 我这里借用官网的定时器的例子,
  * 如果看不懂es6 的代码，很简单，把他还原成es5
  * https://www.babeljs.cn/repl  把es6的代码复制进去就变成es5的代码了
  */
  componentWillMount(){
   this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  /*你执行的方法函数可以写在这里，也可以写在底部，但是一般我都写上面
  * 美观，并且方便人查看，我有一个习惯，写函数方法我都会写一个注释，可能
  * 有人说，会增加安装包大小，其实也不多那几K，可以写注释方便别人查看，自己以后
  * 也能看得懂，取名，要适合当前场景，别TM去取拼音
  */
  /*
  * 定时器
  */
  tick() {
    this.setState({
      date: new Date()
    });
   }
  
  render() {
    return (
      <div>
         <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    </div>
    )
  }

}
export default APP;

5 render

/*
* react最重要的步骤，
* 创建虚拟dom，
* 进行diff算法，当你组件传递数据更新变化都会执行 render
* 更新dom树都在此进行。此时就不能更改state了
* 你这里再去更改state 就会报错哦，记住了 !!!
* 一般父组件传递的props 都会在此获取
* 父子之间传递数据，可以参考我另一篇文章
* https://blog.csdn.net/wonaixiaoshenshen/article/details/89221569
*/
import React, { Component } from 'react';
class APP extends Component {
  render() {
  const { moneylist} =this.props
  console.log(`这里可以打印一下moneylist的值，每次都会更新`${moneylist})
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

6 componentDidMount

/*
* 这个属性就 厉害啦，这个属性就是加载请求数据的最好放处，
* 此处是axios 的方式，feach 的方式其实同理
*/
import React, { Component } from 'react';
import axios from 'axios';
class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    List: [],
    }
componentDidMount（）{
   /*
  *先存一下this，以防使用箭头函数this会乱指，此处可以优化哈。
  */
    const _this=this;  
    axios.get(`你请求的后端的地址`)
    .then(function (response) {
      _this.setState({
        List:response.data,
      });
    })
    .catch(function (error) {
      console.log(error);
    })
}
  render() {
    return (
    /*
    * 如果要循环数据的话就在这里写一个map 循环就好了
    */
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

7 componentWillReceiveProps(nextProps)

import React, { Component } from 'react';
class APP extends Component {

componentWillReceiveProps(nextProps){
/*  此生命周期是需要条件成立才会执行的
*   组件初始化时不调用
*   组件接受新的props时调用。
*   常用于父子组件传值，子组件写这个方法函数
/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

8 shouldComponentUpdate(nextProps, nextState)

/*
* 当没有导致state的值发生变化的setState是否会导致当前页面重渲染 
* 所以，shouldComponentUpdate会阻止不必要的没有意义的重渲染
* shouldComponentUpdate函数是重渲染时render()
* 函数调用前被调用的函数，它接受两个参数：nextProps和nextState，
* 分别表示下一个props和下一个state的值。
* 当函数返回false时候，阻止接下来的render()函数的调用，
* 阻止组件重渲染，而返回true时，组件照常重渲染。
*
*/

import React, { Component } from 'react';
class Son extends Component{
  render(){
    const {index,number,handleClick} = this.props
    /*
    * 在每次渲染子组件时，打印该子组件的数字内容
    */
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  /*
  *点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件
  */
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(
             <div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return (
                           <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                 ) 
                }
                )
              }
           </div>)
  }
}
export default Father
/*
* 但是这样会导致你的页面性能下降，这个例子是我一开始
* 在学的时候，看到有位大佬写过这个我就记录下来了，然后这样虽然是可以实现效果
* 但是了，会导致没有必要的渲染，如何解决了？
* 就是在子组件中渲染之前去进行判断，是否数据变化了，如果没有变化，则停止，没有
* 必要再进行渲染
*/

解决方案如下

import React, { Component } from 'react';
class Son extends Component{
/*
* 子组件中，一开始进行判断，当前传递的props 是否相同
* 如果相同，则暂停渲染（指渲染一次），否则就渲染
*/
  shouldComponentUpdate(nextProps,nextState){
      if(nextProps.number == this.props.number){
        return false
      }
      return true
  }
  render(){
    const {index,number,handleClick} = this.props
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(<div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                }
                )
              }
           </div>)
  }
}
export default Father

9 .componentWillUnmount

import React, { Component } from 'react';

class APP extends Component {

componentWillUnmount(){
/*
* 组件将要卸载时调用，
* 一些事件监听和定时器需要在此时清除
*/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

• 本人最近在学习react，特总结一份自己的理解，发表文章，
  只是想能给你一点点启发 （仅适合小白观看，大佬出门右转）
  也给我自己一个笔记的地方，好记性不如烂笔头说的就是这个道理吧 ！！！