新手对React生命周期的理解（学习笔记）

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，特总结一份本身的理解，发表文章， 只是想能给你一点点启发 （仅适合小白观看，大佬出门右转 ，开玩笑啦，我仍是很但愿大佬指点一下的，谢谢 ^-^） 也给我本身一个笔记的地方，好记性不如烂笔头说的就是这个道理吧 ！！！