React学习-类组件+生命周期

组件创建方式：
1.Class (已被官方废弃，了解，为函数式组件做了铺垫)
2.Function函数

生命周期

1.类组件

App.js

js 复制代码

// 类组件
import React from 'react';
import './App.css';

class App extends React.Component{
  render(){
    return(
      <div>你好</div>
    )
  }
}
export default App;

2.生命周期 componentDidMount

js 复制代码

// 类组件
import React from "react";
import "./App.css";

class App extends React.Component {
  // 构造函数
  constructor(){
    super()
    console.log('构造函数执行');
  }

  //组件挂载完成后
  componentDidMount() {
    console.log("挂载完成！");
  }

  render() {
    console.log('render函数执行');
    return <div>你好</div>;
  }
}

export default App;

对照生命周期图看打印：

3生命周期 getDerivedStateFromProps

getDerivedStateFromProps

如果你定义了 static getDerivedStateFromProps，React 会在初始挂载和后续更新时调用 render 之前调用它。它应该返回一个对象来更新 state，或者返回 null 就不更新任何内容。

props：组件即将用来渲染的下一个 props(相当于vue的组件传参)。
state：组件即将渲染的下一个 state。

js 复制代码

// 类组件
import React from "react";
import "./App.css";

class App extends React.Component {
  // 构造函数
  constructor(){
    super()
    console.log('构造函数执行');
    this.state={
      name:'tom',
      num:0
    }
  }

  //组件挂载完成后
  componentDidMount() {
    console.log("挂载完成！");
  }

  static getDerivedStateFromProps(props,state){
    console.log(props,state);
    console.log('静态方法执行！！');
    return {num:'aasdasd',name:'amy'}

  }

  addOne=()=>{
    console.log(this.state.num);
    this.setState(
     { num:2}
    )
  }
  render() {
    console.log('render函数执行');
    const {name,num}=this.state
    return(
      <div>
         <div>你好</div>
         <div>{name}{num}</div>
         <button onClick={this.addOne}>add</button>
      </div>
    );
  }
}

export default App;

这里注意：getDerivedStateFromProps(props,state)的返回值可以强制拦截更改state的值

面试题：getDerivedStateFromProps有什么用？

js 复制代码

它的返回值会对state的值进行相同覆属性盖修改，如果没有跟state相同的属性就什么都不做。

执行时机：挂载和更新都执行，在render之前

什么场景下需要使用？
人民币大小写转换
https://cloud.tencent.com/developer/article/1685651

4生命周期 getDerivedStateFromProps

如果你实现了 getSnapshotBeforeUpdate，React 会在 React 更新 DOM 之前时直接调用它。它使你的组件能够在 DOM 发生更改之前捕获一些信息（例如滚动的位置）。此生命周期方法返回的任何值都将作为参数传递给 componentDidUpdate。

prevProps：更新之前的 Props。prevProps 将会与 this.props 进行比较来确定发生了什么改变。
prevState：更新之前的 State。prevState 将会与 this.state 进行比较来确定发生了什么改变。

js 复制代码

  //页面更新时
  getSnapshotBeforeUpdate(prevProps, prevState) {
  
    console.log('snap!!');
    console.log(prevProps,prevState);
    return{
      info:'我的消息'
    }
  }

面试题：getSnapshotBeforeUpdate作用？

js 复制代码

执行时机：只会更新的时候执行，render之后，浏览器页面更新之前

返回值可以传递给componentDidUpdate

场景：
	长列表，需要不断地往里面塞入内容
	更新之前，记住滚轮的位置，传递给componentDidUpdate，保持滚轮的位置。
	getSnapshotBeforeUpdate更新之前记录滚轮的位置，数据更新后，在componentDidUpdate中使用原滚轮的位置更新dom，保证滚轮位置不变。

5生命周期 componentDidUpdate

如果你定义了 componentDidUpdate 方法，那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。这个方法不会在首次渲染时调用。

prevProps：更新之前的 props。prevProps 将会与 this.props 进行比较来确定发生了什么改变。
prevState：更新之前的 state。prevState 将会与 this.state 进行比较来确定发生了什么改变。
snapshot：如果你实现了 getSnapshotBeforeUpdate 方法，那么 snapshot 将包含从该方法返回的值。否则它将是 undefined。

js 复制代码

  //页面更新后
  componentDidUpdate(prevProps, prevState, snapshot){
    console.log('update!!');
    console.log(prevProps,prevState,snapshot);
  }

6生命周期 componentWillUnmount

如果你定义了 componentWillUnmount 方法，React 会在你的组件被移除屏幕（卸载）之前调用它。此方法常常用于取消数据获取或移除监听事件。

componentWillUnmount 内部的逻辑应该完全"对应"到 componentDidMount 内部的逻辑，例如，如果你在 componentDidMount 中设置了一个监听事件，那么 componentWillUnmount 中就应该清除掉这个监听事件。如果你的 componentWillUnmount 的清理逻辑中读取了一些 props 或者 state，那么你通常还需要实现一个 componentDidUpdate 来清理使用了旧 props 和 state 的资源（例如监听事件）。

7 生命周期总结

1. 挂载阶段（Mounting Phase）
constructor()

constructor() 是 React 组件的构造函数，用于初始化组件的状态和绑定方法。在组件实例创建时调用，且只会调用一次。

static getDerivedStateFromProps()

static getDerivedStateFromProps() 是一个静态方法，用于根据 props 的变化来更新组件的状态。在组件实例创建和更新阶段都会被调用。

render()

render() 方法负责根据组件的状态和 props 来渲染组件的 UI。它是组件生命周期中的核心方法，必须实现。

componentDidMount()

componentDidMount() 在组件被挂载到 DOM 后调用，通常用于执行一些初始化操作，如网络请求、订阅事件等。

2. 更新阶段（Updating Phase）
static getDerivedStateFromProps()

与挂载阶段相同，static getDerivedStateFromProps() 也在更新阶段被调用，用于根据 props 的变化来更新组件的状态。

shouldComponentUpdate()

shouldComponentUpdate() 用于控制组件是否需要重新渲染。通过返回 true 或 false 来告诉 React 是否要更新组件，默认返回 true。

render()

render() 方法在更新阶段同样会被调用，用于重新渲染组件的 UI。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在 render 方法之后、更新 DOM 之前调用，用于获取更新前的 DOM 状态，通常与 componentDidUpdate() 配合使用。

componentDidUpdate()

componentDidUpdate() 在组件更新完成后调用，通常用于执行一些与更新相关的操作，如更新 DOM、发送网络请求等。

3. 卸载阶段（Unmounting Phase）
componentWillUnmount()

componentWillUnmount() 在组件即将从 DOM 中卸载时调用，通常用于执行一些清理工作，如取消订阅、清除定时器等。

4. 错误处理阶段（Error Handling Phase）
componentDidCatch()

componentDidCatch() 用于捕获子组件的错误，并在发生错误时进行处理。通常用于显示错误信息或记录错误日志。

5. 新增的生命周期方法（New Lifecycle Methods）
startTransition()

startTransition() 允许将某些更新标记为低优先级，以提高页面的响应性能。

useDeferredValue()

useDeferredValue() 用于处理某些状态的延迟更新，以优化性能和用户体验。