react 生命周期 和 HOOKS 简单介绍

react 生命周期

react 生命周期 常用的三个阶段

挂载阶段

01 构造函数 constructor

02 static getDerivedStateFromProps

03 render 函数

04 componentDidMount 组件已经挂载 事件监听 dom 操作 ajax 定时器

如例：

import React, { Component } from "react";
class ChildC extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 5 };
     console.log("挂载:01 constructor");
  }
  static getDerivedStateFromProps(nextProps, prevState) {
     console.log("挂载:02 getDerivedStateFromProps");
        return {};
  }
 
  render() {
    var num = this.state.num;
     console.log("挂载:03 render");
​
    return (
      <div>
        <h3>组件的生命周期ChildC</h3>       
      </div>
    );
  }
  componentDidMount() {
    console.log("挂载:04 componentDidMount");
  }
}
​
export default ChildC;

更新阶段

01 static getDerivedStateFromProps

02 shouldComponentUpdate 返回true执行渲染 返回false不渲染 （优化）

03 render 渲染

04 getSnapshotBeforeUpdate 更新前获取快照 返回的值下个componentDidUpdata 的第三个参数

05 componentDidUpdate 组件已经更新 (dom已经渲染完成)

如例：

import React, { Component } from "react";
class ChildC extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 5 };
  }
  static getDerivedStateFromProps(nextProps, prevState) {;
    console.log("更新：01 getDerivedStateFromProps");
    return {};
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log("更新：02 shouldComponentUpdate");
    return true;
  }
​
  render() {
    var num = this.state.num;
    console.log("更新：03 render");
    return (
      <div>
        <h3>组件的生命周期ChildC</h3>
        <button onClick={() => this.setState({ num: num + 1 })}>{num}</button>
        
      </div>
    );
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("更新：04 getSnapshotBeforeUpdate");
    // 更新前获取快照 返回的值下个componentDidUpdate的第三个参数
    return { name: "mumu", age: 19 };
  }
  componentDidUpdate(prevProps, prevState, snap) {
    console.log("更新：05 componentDidUpdate");
  }
​
}
​
export default ChildC;

卸载阶段

01 componentWillUnmount

import React, { Component } from "react";
class ChildC extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  componentWillUnmount(){
    console.log('卸载：01 componentWillUnmount');
  }
}
​
export default ChildC;

HOOKS

useState 使用状态

导入：import {useState} from “ react”

使用：const [num，setNum] =useState(5)

解释：num：数据 setNum更新num数据的方法 5默认值

调用： num ：{num}

更新：num：<button onClick={ ()=> setNum (num+2) }> </button>

useEffect 使用副作用

作用：模拟生命周期

模拟挂载完毕

例如：

useEffect(
    ()=>{
        //模拟挂载完毕
     },[])
)

模拟某些数据的更新+更新

例如：

useEffect(
    ()=>{
        //num和list的挂载+更新
     },[num，list])
)

模拟任意数据的更新

例如：

useEffect(
    ()=>{
        //模拟任意数据的更新
     })
)

模拟组件将要卸载

例如：

useEffect(
    ()=>{
        return ()=>{
            //模拟数组将要卸载
        }
     })
)