react类组件的 钩子--生命周期

简介: react类组件的 钩子--生命周期

1. 前言

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

2. 表格清晰明了

钩子 功能
constructor(props) 组件创建时调用,用于初始化组件的状态和绑定事件处理方法
static getDerivedStateFromProps(props, state) 组件在更新前调用,可以根据 props 来更新 state 的值。这个函数必须返回一个对象来更新状态,或者返回 null 表示不需要更新状态。
shouldComponentUpdate(nextProps, nextState) 组件在更新前调用,返回一个布尔值,表示是否需要重新渲染组件。如果返回 false,则不会触发 render 函数和后续的生命周期函数。
render() 组件渲染时调用,必须返回一个 React 元素(或 null)
componentDidMount() 组件渲染完成后调用,可以在这里进行网络请求、订阅事件等操作
getSnapshotBeforeUpdate(prevProps, prevState) 组件在更新前调用,返回一个值,这个值会作为第三个参数传递给 componentDidUpdate 函数,用来做一些组件更新后的操作
componentDidUpdate(prevProps, prevState, snapshot) 组件更新完成后调用,可以在这里进行一些 DOM 操作或其他副作用操作
componentWillUnmount() 组件被卸载时调用,可以在这里进行一些清理操作,比如清除定时器、取消订阅等

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

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
6天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
25 0
|
1月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
55 8
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
163 2
|
1月前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
29 0
|
10天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
33 9
|
5天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
8 2
|
8天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
25 6
|
15天前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
17天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
34 2
|
24天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
54 8