初学react的时候我有一个误区,以为父组件render的一次,会将子组件先卸载,再将子组件重新初始化,事实证明不是。

这是对react生命周期函数不太清楚。

父子组件都初始化后,父组件再render一次,子组件实际上进行的是声明周期函数中的updation更新过程。

其实也很好理解这个生命周期函数,父组件执行更新过程一次,理所当然,子组件也执行一次,要不然你父组件给我的数据变了呢,我怎么知道,所以我也更新一下下。

那什么时候子组件会重新初始化呢,例如如下代码:你用父组件来控制子组件的显示和隐藏,将其隐藏的这种写法,就是将子组件给卸载了,再次显示,就会重新初始化。

当修改isShow为false的时候,子组件就直接进入卸载过程,执行componentWillUnmount函数后,就从dom中移除了。

{this.state.isShow && <SubComponent></SubComponent>}

再将isShow为true的时候, 此时子组件才是又初始化了一次,开始新的生命周期,进入初始化过程,接着是挂载过程。

误区以为父组件render一次,子组件会重新初始化的更多相关文章

  1. Vue2.x中的父组件数据传递至子组件

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...

  2. vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

    以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...

  3. vue 父组件传递数据给子组件

    父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...

  4. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  5. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  6. vue中父组件传数据给子组件

    父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...

  7. vue 父组件数据修改,子组件数据未修改

    页面: 父组件  <myfeedback></myfeedback>  子组件  <news></news> myfeedback.vue <te ...

  8. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  9. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  10. vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

随机推荐

  1. CodeForces-617E XOR And Favorite Numbers(莫队)

    Bob has a favorite number k and ai of length n. Now he asks you to answer m queries. Each query is g ...

  2. 【ZooKeeper系列】1.ZooKeeper单机版、伪集群和集群环境搭建

    ZooKeeper安装模式主要有3种: 单机版(Standalone模式)模式:仅有一个ZooKeeper服务 伪集群模式:单机多个ZooKeeper服务 集群模式:多机多ZooKeeper服务 1 ...

  3. DRF Django REST framework 之 路由器与版本控制组件(七)

    路由器 一些Web框架提供了用于自动确定应如何将应用程序的URL映射到处理传入请求的逻辑的功能. 而DRF的路由器组件也提供了一种简单,快速且一致的方式将视图逻辑映射到一组URL上. 路由器组件的使用 ...

  4. 大数据学习笔记——HDFS理论知识之编辑日志与镜像文件

    HDFS文件系统——编辑日志和镜像文件详细介绍 我们知道,启动Hadoop之后,在主节点下会产生Namenode,即名称节点进程,该节点的目录下会保存一份元数据,用来记录文件的索引,而在从节点上即Da ...

  5. CSS去除input和textarea点击选中框

    1.去除chrome等浏览器默认发光边框 input:focus, textarea:focus { outline: none; } 这样textarea在选中的时候,文字会有点移动,解决方法: i ...

  6. 实习生4面美团Java岗,已拿offer!(框架+多线程+集合+JVM)

    美团技术一面 1.自我介绍 说了很多遍了,很流畅捡重点介绍完. 2.问我数据结构算法好不好 挺好的(其实心还是有点虚,不过最近刷了很多题也只能壮着胆子充胖子了) 3.找到单链表的三等分点,如果单链表是 ...

  7. VScode安装golang插件详细教程

    可能是由于非科班自学编程,所以在安装插件的时候虽然参考了很多人写的教程,但是总安装不成功,在综合各位大牛的教程之后进行总结,并且亲自实践安装成功,希望能给初学编程的人一些帮助,如果有不对的地方还希望大 ...

  8. HttpRunner学习9--切换测试报告模板

    前言 在HttpRunner中,给我们提供了 2 套测试报告模板,分别是 default_report_template.html 和 extent_report_template.html . 默认 ...

  9. NET Framework项目移植到NET Core上遇到的一系列坑(2)

    目录 获取请求的参数 获取完整的请求路径 获取域名 编码 文件上传的保存方法 获取物理路径 返回Json属性大小写问题 webconfig的配置移植到appsettings.json 设置区域块MVC ...

  10. Linux 命令行初始化MySQL数据库

    作为一个技术纯小白,在Linux服务器初始化MySQL数据库的时候遇到了一点小问题: ​ 1.不会使用MySQL图形工具,几乎没玩过 ​ 2.客户的VPN没有开放3306端口,没法用navicat等工 ...