服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - React 组件的常用生命周期函数汇总

React 组件的常用生命周期函数汇总

2022-08-15 21:00巨蟹座不吃鱼 React

这篇文章主要介绍了React 组件的常用生命周期函数汇总，组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等

1. 概述

  • 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。
  • 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。
  • 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。
  • 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
  • 只有类组件才有生命周期。

 

2. 生命周期的三个阶段

  • 每个阶段的执行时机
  • 每个阶段钩子函数的执行顺序
  • 每个阶段钩子函数的作用

 

2.1. 创建时（挂载阶段）

  • 执行时机：组件创建时（页面加载时）
  • 执行顺序：constructor() -> render() -> componentDidMount()
  • 钩子函数的作用：
钩子函数 触发时机 作用
constructor 创建组件时，最先执行 1.初始化state 2.为事件处理程序绑定 this
render 每次组件渲染都会触发 渲染 UI （注意：不能调用setState()）
componentDidMount 组件挂载（完成 DOM 渲染）后 1.发送网络请求 2.DOM 操作
  1. // 导入ract 
  2. import React from 'react' 
  3. import ReactDOM from 'react-dom' 
  4.  
  5. class App extends React.Component { 
  6.   constructor(props) { 
  7.     super(props) 
  8.  
  9.     // 1.初始化state 
  10.     this.state = { 
  11.       count: 0 
  12.     } 
  13.  
  14.     // 2.解决事件处理程序this指向问题 
  15.     this.handleClick = this.handleClick.bind(this) 
  16.  
  17.     console.warn('生命周期钩子函数：constructor') 
  18.   } 
  19.   componentDidMount() { 
  20.     // 1.发送ajax请求，获取远程数据 
  21.     // axios.get('http://api....') 
  22.  
  23.     // 2.进行DOM操作 
  24.     const title = document.getElementById('title') 
  25.     console.log(title) 
  26.  
  27.     console.warn('生命周期钩子函数：componentDidMount') 
  28.   } 
  29.  
  30.   // 事件处理程序 
  31.   handleClick() { 
  32.     this.setState({ 
  33.       count: 1 
  34.     }) 
  35.   } 
  36.  
  37.   render() { 
  38.     console.warn('生命周期钩子函数：render') 
  39.  
  40.     // 错误演示（不能调用setState()） 
  41.     // this.setState({ 
  42.     //   count: 2 
  43.     // }) 
  44.  
  45.     return ( 
  46.       <div> 
  47.         <h1 id='title'>统计豆豆被打的次数：{this.state.count}</h1> 
  48.         <button id='btn' onClick={this.handleClick}>打豆豆</button> 
  49.       </div> 
  50.     ) 
  51.   } 
  52. } 
  53. ReactDOM.render(<App />, document.getElementById('root')) 

2.2. 更新时（更新阶段）

  • 执行时机：setState()、forceUpdate()、组件接收到新的props。
  • 说明：以上任意一种变化，组件就会重新渲染。
  • 执行顺序：render() -> componentDidUpdate()
钩子函数 触发时机 作用
render 每次组件渲染都会触发 渲染 UI （与挂载阶段是同一个render）
componentDidUpdate 组件更新（完成 DOM 渲染）后 1.发送网络请求 2.DOM 操作 注意：如果要 setState() 必须放在一个if条件中
 
  1. // 导入ract 
  2. import React from 'react' 
  3. import ReactDOM from 'react-dom' 
  4.  
  5. // 父组件 
  6. class App extends React.Component { 
  7.   constructor(props) { 
  8.     super(props) 
  9.  
  10.     this.state = { 
  11.       count: 0 
  12.     } 
  13.   } 
  14.  
  15.   // 事件处理程序 
  16.   handleClick = () => { 
  17.     // 执行时机：setState() 
  18.     this.setState({ 
  19.       count: this.state.count + 1 
  20.     }) 
  21.  
  22.     // 执行时机：强制更新 
  23.     // this.forceUpdate() 
  24.   } 
  25.  
  26.   render() { 
  27.     return ( 
  28.       <div> 
  29.         {/* 执行时机：组件接收到新的props */} 
  30.         <ShowCount count={this.state.count} /> 
  31.         <button onClick={this.handleClick}>打豆豆</button> 
  32.       </div> 
  33.     ) 
  34.   } 
  35. } 
  36.  
  37. // 子组件 
  38. class ShowCount extends React.Component { 
  39.   render() { 
  40.     console.warn('组件ShowCount的生命周期钩子函数：render') 
  41.     return (<h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>) 
  42.   } 
  43.  
  44.   // 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中 
  45.   // 因为：如果直接调用 setState()，也会导致递归更新！！！ 
  46.   componentDidUpdate(prevProps) { 
  47.     // componentDidUpdate的作用：获取DOM 
  48.     const title = document.getElementById('title') 
  49.     console.log(title) 
  50.  
  51.     // 正确做法：比较更新前后的props是否相同，来决定是否重新渲染组件 
  52.     console.log('上一次的props：', prevProps, '，当前的props：', this.props) 
  53.     if (prevProps.count !== this.props.count) { 
  54.       this.setState({}) 
  55.  
  56.       // componentDidUpdate的作用：发送ajax请求数据 
  57.       // axios.get('http://api....') 
  58.     } 
  59.  
  60.     // 错误演示 
  61.     // this.setState({}) 
  62.  
  63.     console.warn('组件ShowCount的生命周期钩子函数：componentDidUpdate') 
  64.   } 
  65. } 
  66. ReactDOM.render(<App />, document.getElementById('root')) 

2.3. 卸载时（卸载阶段）

执行时机：组件从页面中消失

钩子函数 触发时机 作用
componentWillUnmount 组件卸载（从页面中消失） 执行清理工作（比如：清理定时器等）
 
  1. // 导入ract 
  2. import React from 'react' 
  3. import ReactDOM from 'react-dom' 
  4.  
  5. // 父组件 
  6. class App extends React.Component { 
  7.   constructor(props) { 
  8.     super(props) 
  9.  
  10.     this.state = { 
  11.       count: 0 
  12.     } 
  13.   } 
  14.  
  15.   // 事件处理程序 
  16.   handleClick = () => { 
  17.     this.setState({ 
  18.       count: this.state.count + 1 
  19.     }) 
  20.   } 
  21.  
  22.   render() { 
  23.     return ( 
  24.       <div> 
  25.         { 
  26.           this.state.count > 5 ? <p>豆豆被打死了</p> : <ShowCount count={this.state.count} /> 
  27.         } 
  28.         <button onClick={this.handleClick}>打豆豆</button> 
  29.       </div> 
  30.     ) 
  31.   } 
  32. } 
  33.  
  34. // 子组件 
  35. class ShowCount extends React.Component { 
  36.   componentDidMount() { 
  37.     this.timerId = setInterval(() => { 
  38.       console.log('定时器正在执行~') 
  39.     }, 500) 
  40.   } 
  41.  
  42.   render() { 
  43.     return (<h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>) 
  44.   } 
  45.  
  46.   componentWillUnmount() { 
  47.     console.warn('组件ShowCount的生命周期钩子函数：componentWillUnmount') 
  48.  
  49.     // 清理定时器 
  50.     clearInterval(this.timerId) 
  51.   } 
  52.  
  53. } 
  54. ReactDOM.render(<App />, document.getElementById('root')) 


到此这篇关于React 组件的常用生命周期函数汇总的文章就介绍到这了,更多相关React 组件生命周期函数内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://juejin.cn/post/7131743368115126280

  • 函数
  • React
  • 组件
  • 生命周期

    • 延伸 · 阅读

    精彩推荐
    • React从框架作者角度聊：React调度算法的迭代过程

      从框架作者角度聊：React调度算法的迭代过程

      React内部最难理解的地方就是「调度算法」，不仅抽象、复杂，还重构了一次。可以说，只有React团队自己才能完全理解这套算法。既然这样，那本文尝试从...

      魔术师卡颂8192022-01-10
    • ReactReact如何利用Antd的Form组件实现表单功能详解

      React如何利用Antd的Form组件实现表单功能详解

      这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的...

      GuanJdoJ8332022-03-01
    • React简单分析React中的EffectList

      简单分析React中的EffectList

      这篇文章主要简单分析了React中的EffectList，帮助大家更好的理解和学习使用React进行前端开发，感兴趣的朋友可以了解下...

      zhangyu8282022-02-24
    • ReactReact useMemo和useCallback的使用场景

      React useMemo和useCallback的使用场景

      这篇文章主要介绍了React useMemo和useCallback的使用场景，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下...

      woking5052022-02-25
    • ReactReact+Antd 实现可增删改表格的示例

      React+Antd 实现可增删改表格的示例

      这篇文章主要介绍了React+Antd实现可增删改表格的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下...

      用户3202285797825962022-02-24
    • ReactVite搭建React项目的方法步骤

      Vite搭建React项目的方法步骤

      这篇文章主要介绍了Vite搭建React项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面...

      Cookieboty5432022-02-24
    • Reactreact基础知识总结

      react基础知识总结

      这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下...

      greet_eason8022022-03-08
    • ReactReact Hooks常用场景的使用(小结)

      React Hooks常用场景的使用(小结)

      这篇文章主要介绍了React Hooks常用场景的使用，根据使用场景分别进行举例说明，帮助你认识理解并可以熟练运用 React Hooks 大部分特性，感兴趣的可以了解...

      我是你的超级英雄6102022-02-28
    最近更新
    编辑推荐
    阅读排行
    热门标签
    Vditor 　 不可变值 　 错误边界 　 eject 　 create-react-app 　 useRef 　 Form组件 　 搭建工程 　 ErrorBoundary 　 Remax 　 noox 　 tsx 　 函数式组件 　 useCallback 　 useMemo 　 todolist 　 文档编写 　 ReactRouter 　 共享组件 　 代码分割 　 setState 　 PReact 　 zarm 　 cloneElement 　 Threejs 　 EffectList 　 emotion 　 TypeScrip 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图