react 生命周期函数

我会记得大雨滂沱,没有伞的日子, 我叫李大玄

前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄

以一个文件为例,好比创建一个Hello组件
页面一进来会走这些函数

在这里插入图片描述

/* jshint esversion: 6 */
/*
 * @Description: 
 * @version: 
 * @Author: 李继玄（lijixuan@quclouds.com）
 * @Date: 2020-09-03 10:00:36
 * @LastEditors: 李继玄（lijixuan@quclouds.com）
 * @LastEditTime: 2020-09-03 10:25:05
 * @FilePath: /test/src/components/Hello.js
 */
import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    console.log('初始化阶段');
    super(props);
    /* 初始化阶段 */
    this.state = {
      name: '李大玄',
      age: 18
    }
  }
  /* 页面加载之前  一般进行ajax */
  componentWillMount() {
    console.log('页面加载之前  一般进行ajax');
  }
  /* 组件加载后 */
  componentDidMount() {
    console.log('组件加载后');
  }

  state= {
    
  }
  updateUser = () => {
    this.setState({
      name: '李继玄',
      age: '19'
    })
  }
  shouldComponentUpdate() {
    console.log('数据是否需要更新');
    /**
     * true 更新
     * false 不更新
     */
    return false;
  }
  render() {
    /* 组件加载或者数据更新  会执行 reader 方法  */
    console.log('组件加载或者数据更新  会执行 reader 方法');
    return <div>
        我叫{this.state.name}, 今年{this.state.age}了
        <button onClick={this.updateUser}>数据更新</button>
        <hr></hr>
      </div>
  }
};
export default Hello;

当我们点击按钮去触发数据更新的时候
当点击按钮更新数据的时候, 会执行 shouldComponentUpdate 然后执行 render

4331b588-d3a9-4a71-ab96-b812ad3aabec.gif