1. 前言

1. react 版本更新一些钩子也被废弃了,总结下吧

2. 表格清晰明了

3. 外加代码 如虎添翼

import React from 'react';

class Friend extends React.Component {
  // 组件创建时调用，用于初始化组件的状态和绑定事件处理方法。
  constructor(props) {
    super(props);
    this.state = { count: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("点击----");
    this.setState({ count: this.state.count + 1 });
  }
// 组件在更新前调用，可以根据 props 来更新 state 的值。
//这个函数必须返回一个对象来更新状态，或者返回 null 表示不需要更新状态。
  // static getDerivedStateFromProps(props, state) {
  //   if (props.count !== state.count) {
  //     return { count: props.count };
  //   }
  //   return null;
  // }
  // 组件在更新前调用，返回一个布尔值，表示是否需要重新渲染组件。
  //如果返回 false，则不会触发 render 函数和后续的生命周期函数。
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }


  // 组件渲染完成后调用，可以在这里进行网络请求、订阅事件等操作。
  componentDidMount() {
    console.log('Component mounted------2');
  }
  // 组件在更新前调用，返回一个值，这个值会作为第三个参数传递给 
  // componentDidUpdate 函数，用来做一些组件更新后的操作。
  // getSnapshotBeforeUpdate(prevProps, prevState) {
  //   console.log('Component about to update');
  //   return { message: 'Snapshot!' };
  // }
  // ：组件更新完成后调用，可以在这里进行一些 DOM 操作或其他副作用操作。
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('Component updated');
    console.log('Snapshot:', snapshot);
  }
  // 组件被卸载时调用，可以在这里进行一些清理操作，比如清除定时器、取消订阅等。
  componentWillUnmount() {
    console.log('Component unmounted');
  }

  render() {
    // 组件渲染时调用，必须返回一个 React 元素（或 null）
    console.log("render ---------1");
    return (
      <div>
        <h1>朋友圈</h1>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    );
  }
}
export default Friend

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉