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

键.

于 2024-08-12 15:12:40 发布

阅读量721

点赞数 12

分类专栏： react.js 文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/beekim/article/details/141129249

版权

react.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

生命周期
在这里插入图片描述

1.类组件

App.js

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

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

在这里插入图片描述

2.生命周期 componentDidMount

// 类组件
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。



// 类组件
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;

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f4c444cfddbc4743a8f7cd5679085cef.png
这里注意：getDerivedStateFromProps(props,state)的返回值可以强制拦截更改state的值

面试题：getDerivedStateFromProps有什么用？

它的返回值会对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 进行比较来确定发生了什么改变。

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

面试题：getSnapshotBeforeUpdate作用？

执行时机：只会更新的时候执行，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。

  //页面更新后
  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 的资源（例如监听事件）。