误区以为父组件render一次,子组件会重新初始化
初学react的时候我有一个误区,以为父组件render的一次,会将子组件先卸载,再将子组件重新初始化,事实证明不是。
这是对react生命周期函数不太清楚。
父子组件都初始化后,父组件再render一次,子组件实际上进行的是声明周期函数中的updation更新过程。
其实也很好理解这个生命周期函数,父组件执行更新过程一次,理所当然,子组件也执行一次,要不然你父组件给我的数据变了呢,我怎么知道,所以我也更新一下下。
那什么时候子组件会重新初始化呢,例如如下代码:你用父组件来控制子组件的显示和隐藏,将其隐藏的这种写法,就是将子组件给卸载了,再次显示,就会重新初始化。
当修改isShow为false的时候,子组件就直接进入卸载过程,执行componentWillUnmount函数后,就从dom中移除了。
{this.state.isShow && <SubComponent></SubComponent>}
再将isShow为true的时候, 此时子组件才是又初始化了一次,开始新的生命周期,进入初始化过程,接着是挂载过程。
误区以为父组件render一次,子组件会重新初始化的更多相关文章
- Vue2.x中的父组件数据传递至子组件
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
- vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据
以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- vue 父组件数据修改,子组件数据未修改
页面: 父组件 <myfeedback></myfeedback> 子组件 <news></news> myfeedback.vue <te ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新
问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...
随机推荐
- WSL(Windows Subsystem for Linux) Ubuntu 下byobu状态栏错误的问题
关于WSL的,Win10 的Linux子系统如何安装,就不赘述了,Win10商店里就有,至于win7和win8.1想装这个估计也不行,所以跳过. 最近处于好奇,也懒得弄VMware的虚拟机(那玩意儿占 ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- 【CentOS7】修改yum源
[CentOS7]修改yum源 转载:https://www.cnblogs.com/yangchongxing/p/10645944.html 1.备份源 # mv /etc/yum.repos.d ...
- Spring Cloud Alibaba 新一代微服务解决方案
本篇是「跟我学 Spring Cloud Alibaba」系列的第一篇, 每期文章会在公众号「架构进化论」进行首发更新,欢迎关注. 1.Spring Cloud Alibaba 是什么 Spring ...
- 跟着文档学习gulp1.1安装入门
Step1:检查是否已经安装了node,npm 和 npX是否正确安装 Step2:安装gulp命令行工具(全局安装gulp) npm install --global gulp-cli Step3: ...
- 《Java算法》判重算法-整数判重
判重算法-整数判重 /** * 判断大于1,小于63的整数是否出现重复数字. * * 算法逻辑:先获取8 根据移位(1 << arrInt[i]) 得到2进制数100000000 , * ...
- PyTorch-网络的创建,预训练模型的加载
本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...
- ArcGIS Runtime SDK for WPF学习笔记(一)
本节主要讲解如何安装ArcGIS Runtime SDK,以及移除注释与水印. 附上ArcGIS Runtime SDK for .NET的官方操作手册网址:https://developers.ar ...
- Samba CVE-2017-7494验证实验
漏洞简介 Samba是在Linux和UNIX系统上实现SMB协议的一个软件,不少IoT设备也使用了Samba.2017年5月24日Samba发布了4.6.4版本,修复了一个严重的远程代码执行漏洞,漏洞 ...
- EtreCheck是否修复恶意软件和广告软件?为什么EtreCheck无法制作截图?
EtreCheck for Mac是一款Mac上的软件,有很对人对这款软件并不熟系,今天小编就来给大家介绍一下这款软件最常出现的问题—EtreCheck是否修复恶意软件和广告软件?为什么EtreChe ...