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

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
5天前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
19天前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
21 3
|
19天前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
18 1
|
1月前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
1月前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
1月前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
1月前
|
存储 前端开发 JavaScript
探索React中的类组件和函数组件
探索React中的类组件和函数组件
|
1月前
|
缓存 前端开发 JavaScript
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。
|
1月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
30 0
|
1月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
26 0