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

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
24天前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
48 8
|
22天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
118 2
|
20天前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
29 0
|
1天前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
3天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
13 2
|
10天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
30 8
|
9天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
21天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
2月前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
61 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
60 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用