首页 > 其他分享 >React组件生命周期

React组件生命周期

时间:2022-11-18 10:55:18浏览次数:71  
标签:生命周期 render React state 调用 组件

 

                                               组件的生命周期

          

 

 挂载:---------------    组件实例被创建并插入 DOM 中时

1. constroctor()

  如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数。

  通常用于以下两种情况:1.  通过给 this.state 赋值对象来初始化内部 state。2.  为事件处理函数绑定实例

2.     render()

  render() 方法是 class 组件中唯一必须实现的方法。

3. componentDidMount()

  会在组件挂在后立即调用。

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

1.    render()

2.    componentDidUpdata()

  在更新后会被立即调用。首次渲染不会执行此方法。

卸载:------------   组件从 DOM 中移除时会调用

1. componentWillUnmout()

标签:生命周期,render,React,state,调用,组件
From: https://www.cnblogs.com/fmy-dd/p/16902489.html

相关文章

  • 四招教你样式化界面组件KendoReact,让应用程序主题更个性化
    KendoUI致力于新的开发,来满足不断变化的需求,通过React框架的KendoUIJavaScript封装来支持ReactJavascript框架。KendoUIforReact能够为客户提供更好的用户体验,并且......
  • Android 服务组件
    定义服务是Android中实现程序后台运行的解决方案,不和用户交互而且要求长期运行的任务。多线程编程1.线程基本用法//继承Thread类classMyThreadextendsThread{......
  • react学习
    一:使用npx命令创建临时下载脚手架项目成功后自动删除不占用空间不担心版本低1.运行命令:npxcreate-react-appdemo2.cd到创建的目录下cddemo3.根据package.json中的......
  • vue elementui Switch组件添加开关样式
      /deep/.el-switch{   &::before{    content:'开';    display:none;    color:#fff;    z-index:1;  ......
  • vue组件通信6种方式总结(常问知识点)
    前言在Vue组件库开发过程中,Vue组件之间的通信一直是一个重要的话题,虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用Vuex往往会......
  • vue中兄弟组件方法互相调用 子组件调用子组件内的方法
    使用this.$refs方法,如果直接用无法调取到可以先打印出来看一下结构有时候需要加[0],如下:  两个子组件:<ads-banner-voteref="bannerVote"@openVote="openVote"/>/......
  • React-hooks面试考察知识点汇总
    Hook简介Hook出世之前React存在的问题在组件之间复用状态逻辑很难React没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到store)。有一些解决此类问题的......
  • 前端一面经典react面试题(边面边更)
    react的虚拟dom是怎么实现的首先说说为什么要使用VirturlDOM,因为操作真实DOM的耗费的性能代价太高,所以react内部使用js实现了一套dom结构,在每次操作在和真实dom之前,使......
  • React-Hooks怎样封装防抖和节流-面试真题
    Debouncedebounce原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在......
  • react面试题详解
    React-Router怎么设置重定向?使用<Redirect>组件实现路由的重定向:<Switch><Redirectfrom='/users/:id'to='/users/profile/:id'/><Routepath='/users/profile/:i......