React中的生命周期和子组件

目录
  • 组件生命周期
    • 创建创建期
    • 获取虚拟DOM
    • 子组件

组件生命周期

为了说明组件的创建，存在，销毁的过程，react提供了组件的生命周期，共分三大周期：

  • 创建期：说明组件的创建的过程，相当于人的少年
  • 存在期：说明组件的存在的过程，相当于人的中年
  • 销毁期：说明组件的销毁的过程，相当于人的老年

创建创建期

创建期共分五个阶段：

  • ES5开发中，对应五个方法：getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​componentDidMount​​
  • ES6开发中，移除了前两个方法：componentWillMount, render, componentDidMount

第一个阶段 组件定义默认属性数据

defaultProps静态属性中定义

组件尚未创建

第二个阶段 组件初始化状态数据

在构造函数中定义constructor

一定要执行super(props)，实现构造函数继承，并且要传递属性数据参数

继承之后，this.props与props就没有区别了

我们为this.state赋值，机可以初始化，

在构造函数中，我们可以访问属性数据，因此可以用属性数据为状态数据赋值

这样就实现了数据有外部流入内部

第三个阶段 组件即将被构建

通过componentWillMount方法定义

此时可以访问到属性数据以及状态数据，并且无法访问虚拟DOM

我们可以提前请求数据，我们也可以为需要在虚拟DOM中使用的插件，初始化。

第四个阶段 渲染组件

我们通过render方法定义

返回值是渲染的虚拟DOM

此时可以访问到属性数据以及状态数据，无法访问虚拟DOM

所以我们在渲染虚拟DOM的时候，可以用属性数据或者状态为虚拟DOM赋值

第五个阶段 组件构建完成

我们通过componentDidMount方法定义

此时可以访问到属性数据以及状态数据，也可以访问虚拟DOM

因此我们可以在这个阶段，发送请求，绑定事件等实现一些交互

该阶段方法执行完毕，标志着组件创建期的结束，存在期的开始，

所以该方法在组件实例化对象的一生中，只执行一次。

我们可以在这个阶段修改状态数据，

一旦​​属性​​​或者​​状态​​数据发生改变，组件将进入存在期。

获取虚拟DOM

在渲染库（react-dom）中,提供了findDOMNode的方法，可以获取虚拟DOM对应的真实DOM元素。

// 定义组件
class GoTop extends Component {
// 2 初始化状态数据
constructor(props) {
super(props);
// 状态
// 用属性数据，为状态数据初始化
this.state = {
text: props.text
}
console.log(222, 'constructor', this, arguments)
}
// 3 组件即将构建
componentWillMount() {
console.log(333, 'componentWillMount', this, arguments, findDOMNode(this))
}
// 4 渲染虚拟DOM
render() {
console.log(444, 'render', this, arguments)
return <span>{this.state.text}</span>
}
// 5 组件构建完成
componentDidMount() {
console.log(555, 'componentDidMount', this, arguments, findDOMNode(this))
}
}
// 1 默认属性数据
GoTop.defaultProps = {
text: '返回顶部'
}
// 渲染组件
render(<GoTop />, app)

子组件

虚拟DOM可以添加子虚拟DOM，组件是对虚拟DOM的封装，因此他们的行为是一致的，组件也可以定义子组件

在​​该组件​​中定义的​​组件​​，我们称之为​​该组件​​的​​子组件​​，​​该组件​​称之为​​父组件​​

<Zss>
<Demo />
</Zss>

Zss组件就是父组件，Demo组件就是子组件。

组件是完整独立的，因此数据不会共享，想让组件之间共享数据，我们要实现组件间的通信。

到此这篇关于React中的生命周期和子组件的文章就介绍到这了,更多相关React 生命周期 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react新版本生命周期钩子函数及用法详解

    react新版本生命周期钩子函数及用法详解

    和旧的生命周期相比 准备废弃三个钩子,已经新增了两个钩子 React16 之后有三个生命周期被废弃(但并没有删除) componentWillMount( 组件将要挂载的钩子) componentWillReceiveProps(组件将要接收一个新的参数时的钩子) componentWillUpdate(组件将要更新的钩子) 新版本的生命周期新增的钩子 getDerivedStateFromProps 通过参数可以获取新的属性和状态 该函数是静态的 该函数的返回值会覆盖掉组件状态 getSnap

  • 浅谈React Component生命周期函数

    浅谈React Component生命周期函数

    React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理: 1,挂载:constructor(常用).static getDerivedStateFromProps.render(常用).componentDidMount(常用) constructor是类组件的构造函数,在这可以初始化组件的state或进行方法绑定如:constructor(props){ super(prop

  • React的生命周期详解

    React的生命周期详解

    一.React生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期

  • 关于antd tree 和父子组件之间的传值问题(react 总结)

    关于antd tree 和父子组件之间的传值问题(react 总结)

    项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中. 写了三个组件: 现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参) 现在可以分部解决问题: 1.首先获取点击的树节点以及所有父节点的id ---arrKeys 2.在点击树节点获取当前节点以及所有父级节点之后,通

  • React父组件调用子组件中的方法实例详解

    目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件  Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte

  • 面试官常问React的生命周期问题

    面试官常问React的生命周期问题

    React的生命周期 两张图带你理解 React的生命周期 React的生命周期(旧) class Life extends React.Component{ // 构造器 constructor(props){ console.log('Life构造器---constructor'); super(props) this.state={num:0} } // 计算+1功能 add=()=>{ const {num} = this.state this.setState({num:num+1})

  • React Class组件生命周期及执行顺序

    React Class组件生命周期及执行顺序

    一.react组件的两种定义方式 1.函数组件,简单的函数组件像下面这样,接收Props,渲染DOM,而不关注其他逻辑 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 函数组件无法使用State,也无法使用组件的生命周期方法,没有this,纯展示型组件. 建议:在写组件时,先思考组件应不应该写成展示型组件,能写成展示型组件的尽量写成展示型. 2.class组件,需要继承React.Component,

  • React父子组件传值(组件通信)的实现方法

    目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <

  • React中的生命周期和子组件

    目录 组件生命周期 创建创建期 获取虚拟DOM 子组件 组件生命周期 为了说明组件的创建,存在,销毁的过程,react提供了组件的生命周期,共分三大周期: 创建期:说明组件的创建的过程,相当于人的少年 存在期:说明组件的存在的过程,相当于人的中年 销毁期:说明组件的销毁的过程,相当于人的老年 创建创建期 创建期共分五个阶段: ES5开发中,对应五个方法:getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​co

  • React中的生命周期详解

    React中的生命周期详解

    目录 react生命周期 常用的生命周期 不常用的生命周 完整的生命周期图 react生命周期 函数组件无生命周期,生命周期只有类组件才拥有 生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生 的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载 常用的生

  • Vue中的生命周期介绍

    Vue中的生命周期介绍

    什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreate Created beforeMount mounted beforeUpdate updated beforeDestroy destroyed Vue组件的生命周期共分为三个阶段,如下图所示: 创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次. 先看一下创建阶段完成的事情:

  • React生命周期与父子组件间通信知识点详细讲解

    React生命周期与父子组件间通信知识点详细讲解

    目录 声明周期 声明周期解析 生命周期函数 Constructor componentDidMount componentDidUpdate componentWillUnmount 不常用的生命周期函数 认识组件间的通信 参数propTypes 限制单个元素 默认 Prop 值 对于函数式组件 子组件传递父组件 声明周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能: 生命周期和

  • 浅谈对Angular中的生命周期钩子的理解

    本文介绍了Angular中的生命周期钩子的理解,分享给大家,希望对大家有所帮助 什么是生命周期钩子 简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力. 有哪些生命周期钩子 Angular中从一个组件的创建到销毁一个有八个生命周期钩子它们,按照先后顺序.它们分别是: ngOnChanges() ngOnInit() ngDoC

  • 梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    什么是生命周期? 生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程! 以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期! vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下v

  • 一文带你理解 Vue 中的生命周期

    目录 1.beforeCreate & created 2.beforeMount & mounted 3.beforeUpdate & updated 4.beforeDestroy & destroyed 5.activated & deactivated 前言: 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户

  • React State与生命周期详细介绍

    React State与生命周期详细介绍

    目录 一.State 1.1 类组件中的State 1.2 函数组件中的State 二.React生命周期 2.1 挂载 2.2 更新 2.3 卸载 2.4 函数式组件useEffect 三.总结 一.State 在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.这和vue中组件的data中的数据是相似的. 1.1 类组件中的State <!DOCTYPE html> <html lang="en"&

  • 解决Vue中的生命周期beforeDestory不触发的问题

    分享一句很有用的经验: 给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed 结束! 补充知识:vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 act

  • 微信小程序中的生命周期与生命周期函数浅析介绍

    微信小程序中的生命周期与生命周期函数浅析介绍

    目录 一.生命周期 概念 分类 二.生命周期函数 概念 作用 分类 三.总结 一.生命周期 概念 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段 小程序的生命周期 小程序启动,表示生命周期的开始 小程序关闭.表示生命周期的结束 中间小程序的整个运行过程就是小程序的生命周期 分类 应用生命周期 特指小程序从启动-->运行-->销毁的过程 页面生命周期 特指小程序中每个页面的加载-->渲染-->销毁的整个过程 自定义组件生命周期 组件实例被

随机推荐