//这里是父组件的代码:
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——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值的更多相关文章

  1. Angular06 组件、模块、父子组件之间的数据传递

    1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...

  2. Vue组件注册与数据传递

    父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...

  3. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

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

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

  5. vue 父组件中的数据如何传递给子组件

    父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...

  6. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  7. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

  8. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  9. 如果把父组件的数据实时的传递到子组件:用watch

    1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...

随机推荐

  1. CentOS+uwsgi+django+nginx 环境部署及分析

    写在部署前 在线上部署django项目时,比较成熟的方案是:nginx + uWSGI + Django. nginx和Django 都比较熟悉了,uWSGI是什么呢?WSGI是一个协议,python ...

  2. Java多线程——不变性与安全发布

    1.不变性 某个对象在被创建后其状态就不能被修改,那么这个对象就称为不可变对象,不可变对象一定是线程安全的.不可变对象很简单.他们只有一种状态,并且该状态由构造函数来控制. 当满足以下条件时,对象才是 ...

  3. QuantLib 金融计算——基本组件之 DayCounter 类

    目录 QuantLib 金融计算--基本组件之 DayCounter 类 DayCounter 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. QuantLi ...

  4. MarkDown添加图片的三种方式

    插图最基础的格式就是: ![Alt text](图片链接 "optional title") Alt text:图片的Alt标签,用来描述图片的关键词,可以不写.最初的本意是当图片 ...

  5. [Xamarin] 透過 IsolatedStorageFile儲存資料(转帖)

    開發手機App通常都會遇到想要儲存資料的,舉個例來說,像是 (圖片來源:http://docs.xamarin.com/guides/android/application_fundamentals/ ...

  6. 使用redux-devtools工具

    在vue中型项目开发的过程中,一般都是要用到vuex这个状态管理工具的,这样可以方便我们管理全局的状态,同时,为了在开发的过程中,更加方便地实时查看到state状态,我们会使用 vue-devtool ...

  7. ACCESS 手工注入

    ACCESS的注入,基本是死的.思路很简单,基本都可以工具解决.上代码: 1.判断有无注入点' and 1=1 and 1=22.猜表一般的表的名称无非是admin adminuser user pa ...

  8. 用table布局和div布局的区别

    table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...

  9. digestmd5.c:4037:15: error: #elif with no expression

    执行如下:sed -i.bak 's/#elif WITH_DES/#elif defined(WITH_DES)/' \ plugins/digestmd5.c

  10. Error处理:/bin/bash^M: 坏的解释器: 没有该文件或目录(bad interpreter: No such file or directory)

    在Linux下编译运行脚本的时候出现”/bin/bash^M: 坏的解释器: 没有那个文件或目录(bad interpreter: No such file or directory)“这样的错误. ...