reac——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:
export default class HeaderCom_son extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0,
}
this.x = 0;
this.y = 0;
}
componentWillMount() {
this.timer = setInterval(function () {
this.x++;
this.setState({
counter: this.state.counter + 1
})
this.setState
}.bind(this), 1000);
this.pp = null;
this.init();
} init() {
this.pp = <HeaderCom_son_son x={this.x} y={this.y} counter={this.state.counter}/> //这个this.pp仅运行一次,所以就是仅赋值一次
} render() {
this.y++;
return (
<div>
<div>这是HeaderCom_son</div> ====================
<h3>说明:this.x和this.state.counter都是在一个定义在componentWillMount内的计时器里实现自增</h3>
<p>this.state.counter:{this.state.counter}</p> <p>this.x:{this.x}</p>
====================
<h3>说明:this.y是定义在render方法里实现自增</h3>
<p>this.y:{this.y}</p>
<h3>下面是三个:HeaderCom_son_son组件</h3>
{this.pp} {/* 这个结果永远是初始值0,0,0不会变 */}
<HeaderCom_son_son x={this.x} y={this.y} counter={this.state.counter}/> {/* 这个结果是:子组件的props属性会实时改变,所以能同步获取父组件的改变 */}
<HeaderCom_son_son x={-1} y={-1} counter={-1}/> {/* 这个结果是当然页不会变 */}
</div> );
}
}
//这里是子组件的代码
import React from 'react'; export default class HeaderCom_son_son extends React.Component { render() {
return(
<div>
我是HeaderCom_son_son<br/>
{this.props.x}<br/>
{this.props.y}<br/>
{this.props.counter}
</div>
); }
}
运行293秒后的结果如下图所示:
小总结:
1、this.pp = <HeaderCom_son_son x={this.x} y={this.y} counter={this.state.counter}/>
这个this.pp仅运行一次,所以就是仅赋值一次,并且我发现,this.pp.props和子元素的this.props显示是相同的,还有,即使运行时“等号”右侧的值是对象,this.pp.props的属性值仍是简单数据类型,
所以,如果这个this.pp仅运行一次后期,无论this.pp.props内的属性再如何改变,都不会再传递到子组件上!
2、<HeaderCom_son_son x={this.x} y={this.y} counter={this.state.counter}/> {/* 这个结果是:子组件的props属性会实时改变,所以能同步获取父组件的改变 */}
这个组件的属性都所以能够实时更新,是因为:它在render()方法里,而我们每次只要运行了setState更改都会重新运行render()方法,所以会重新运行:
<HeaderCom_son_son x={this.x} y={this.y} counter={this.state.counter}/>,
也就会重新赋值,所以能实现实时传递给子组件;
但是,如果我们每次更新的并不是state,而仅仅更新其他值,如仅更新this.x,那么这个更新也不能同步传递给子组件,因为不会重新运行render(),也就不会重新赋值;
最后的总结:
归根结底,要判断子组件能否同步获得父组件传递过来的值,就是看父组件更新时,是否会重新运行传递给子组件属性的那句代码;
reac——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值的更多相关文章
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- Vue组件注册与数据传递
父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Vue2.x中的父组件数据传递至子组件
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
- vue 父组件中的数据如何传递给子组件
父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...
- Vue把父组件的方法传递给子组件调用(评论列表例子)
Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...
- vue父组件与子组件之间的数据传递
父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- 如果把父组件的数据实时的传递到子组件:用watch
1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...
随机推荐
- Oracle数据库学习(一):虚拟机下Oracle Linux的安装与配置
这篇博文主要以图片的形式讲述Oracle Linux在虚拟机下的安装与配置 一.前期虚拟机安装ISO文件的配置 1.创建新的虚拟机 2.选择“自定义(高级)”选项,下一步,默认“虚拟机硬件兼容性”或选 ...
- 网络基础 02_TCP/IP模型
1 TCP/IP参考模型概述 2 应用层 3 传输层 3.1 传输控制协议(TCP) 面向连接 可靠传输 流控及窗口机制 使用TCP的应用: Web浏览器:电子邮件: 文件传输程序 3.2 用户数 ...
- Fleury算法
关于为什么不选桥 因为选桥之后会变成两个联通分支,这时由于可能产生的新联通分支不是孤立顶点,他俩都不联通了,那么也就绝对不可能“一笔画”走下来了 关于为什么可以选除桥之外的任意一条边走 本质原因是因为 ...
- C# 文件读写系列二
读取文件原则上非常简单,但它不是通过FileInfo和DirectoryInfo来完成的,关于FileInfo和DirectoryInfo请参考C# 文件操作系列一,在.Net Framework4. ...
- linux 和 windows 安装composer
在 Linux 和 Mac OS X 中可以运行如下命令: curl -sS https://getcomposer.org/installer | phpmv composer.phar /usr/ ...
- 对于maven创建spark项目的pom.xml配置文件(图文详解)
不多说,直接上干货! http://mvnrepository.com/ 这里,怎么创建,见 Spark编程环境搭建(基于Intellij IDEA的Ultimate版本)(包含Java和Scala版 ...
- JavaScript设计模式-12.门面模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mongodb-脏数据问题
采用多线程后, 发现最大的问题是redis和mongodb的脏数据问题 1, upsert 的脏数据问题 多线程对同一个collect进行upsert操作时, 会引发并发脏数据问题, 最开始的解决方案 ...
- InnoDB的后台线程(IO线程,master线程,锁监控线程,错误监控线程)和内存(缓冲池,重做日志缓冲池,额外内存池)
InnoDB有多个内存块,你可以认为这些内存块组成了一个大的内存池,负责如下工作: 维护所有进程/线程需要访问的多个内部数据结构. 缓存磁盘上的数据,方便快速地读取,并且在对磁盘文件的数据进行修改之前 ...
- 使用VNC访问Linux桌面
在一个严重依赖Windows的工作环境中,比如电子邮件被限定为Outlook(因为加密要求), VPN软件不支持Linux版本,那么,只使用Linux桌面是不够的,还需要在Linux桌面上跑个虚拟机运 ...