0


【React】React 生命周期完全指南


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 **
💫个人格言: "如无必要,勿增实体" **


文章目录

React 生命周期完全指南

在这里插入图片描述

一、生命周期概述

React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为,优化性能,并处理副作用。

二、生命周期的三个阶段

2.1 挂载阶段(Mounting)

组件实例被创建并插入 DOM 的过程

classMyComponentextendsReact.Component{// 1. 构造函数constructor(props){super(props);this.state ={ count:0};
    console.log('1. constructor');}// 2. 静态方法,很少使用staticgetDerivedStateFromProps(props, state){
    console.log('2. getDerivedStateFromProps');returnnull;}// 3. 渲染方法render(){
    console.log('3. render');return<div>{this.state.count}</div>;}// 4. 挂载完成componentDidMount(){
    console.log('4. componentDidMount');}}

2.2 更新阶段(Updating)

当组件的 props 或 state 发生变化时触发更新

classMyComponentextendsReact.Component{// 1. 静态方法staticgetDerivedStateFromProps(props, state){returnnull;}// 2. 是否应该更新shouldComponentUpdate(nextProps, nextState){returntrue;}// 3. 渲染render(){return<div>{this.state.count}</div>;}// 4. 获取更新前的快照getSnapshotBeforeUpdate(prevProps, prevState){returnnull;}// 5. 更新完成componentDidUpdate(prevProps, prevState, snapshot){// 处理更新后的操作}}

2.3 卸载阶段(Unmounting)

组件从 DOM 中移除的过程

classMyComponentextendsReact.Component{componentWillUnmount(){// 清理工作,比如清除定时器、取消订阅等
    console.log('组件即将卸载');}}

三、常用生命周期方法详解

在这里插入图片描述

3.1 constructor(构造函数)

constructor(props){super(props);// 初始化状态this.state ={
    count:0,
    data:[]};// 绑定方法this.handleClick =this.handleClick.bind(this);}

使用场景:

  • 初始化组件的 state
  • 绑定事件处理方法
  • 不要在这里调用 setState
  • 避免在这里执行副作用操作

3.2 componentDidMount

componentDidMount(){// 发起网络请求fetch('api/data').then(res=> res.json()).then(data=>{this.setState({ data });});// 添加事件监听
  window.addEventListener('resize',this.handleResize);// 设置定时器this.timer =setInterval(()=>{this.setState(state=>({
      count: state.count +1}));},1000);}

使用场景:

  • 发起网络请求
  • DOM 操作
  • 添加订阅
  • 设置定时器

3.3 componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot){// 比较 props 变化if(this.props.userID !== prevProps.userID){this.fetchData(this.props.userID);}// 比较 state 变化if(this.state.count !== prevState.count){
    document.title =`点击次数:${this.state.count}`;}}

使用场景:

  • 对比更新前后的数据
  • 根据条件执行副作用
  • 注意避免无限循环

3.4 componentWillUnmount

componentWillUnmount(){// 清除定时器clearInterval(this.timer);// 移除事件监听
  window.removeEventListener('resize',this.handleResize);// 取消订阅this.subscription.unsubscribe();}

使用场景:

  • 清理定时器
  • 取消网络请求
  • 清除事件监听
  • 取消订阅

四、生命周期的最佳实践

4.1 性能优化

classOptimizedComponentextendsReact.Component{shouldComponentUpdate(nextProps, nextState){// 只在必要时更新return(this.props.value !== nextProps.value ||this.state.count !== nextState.count
    );}render(){return(<div><h1>{this.props.value}</h1><p>{this.state.count}</p></div>);}}

4.2 错误处理

classErrorBoundaryextendsReact.Component{
  state ={ hasError:false};staticgetDerivedStateFromError(error){return{ hasError:true};}componentDidCatch(error, errorInfo){// 记录错误日志
    console.error('错误信息:', error);
    console.error('错误详情:', errorInfo);}render(){if(this.state.hasError){return<h1>出错了!</h1>;}returnthis.props.children;}}

五、新旧生命周期的变化

5.1 已废弃的生命周期方法

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

5.2 新增的生命周期方法

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

六、Hooks 时代的生命周期

在这里插入图片描述

functionHooksComponent(){// 相当于 constructor 和 componentDidMountconst[count, setCount]=useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(()=>{
    document.title =`点击次数:${count}`;},[count]);// 相当于 componentDidMount 和 componentWillUnmountuseEffect(()=>{consthandler=()=> console.log('窗口大小改变');
    window.addEventListener('resize', handler);// 清理函数return()=>{
      window.removeEventListener('resize', handler);};},[]);return<div>计数:{count}</div>;}

七、总结

React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。合理使用这些方法可以:

  1. 优化组件性能
  2. 正确处理副作用
  3. 管理组件状态
  4. 避免内存泄漏

在实际开发中,最常用的生命周期方法是:

  • constructor:初始化
  • componentDidMount:副作用处理
  • componentDidUpdate:更新后的操作
  • componentWillUnmount:清理工作

随着 React Hooks 的普及,函数组件正在逐渐取代类组件。但理解生命周期概念对于深入理解 React 的工作原理仍然至关重要。

End


本文转载自: https://blog.csdn.net/qq_44214428/article/details/143454732
版权归原作者 鑫宝Code 所有, 如有侵权,请联系我们删除。

“【React】React 生命周期完全指南”的评论:

还没有评论