参考转载:链接:http://www.jianshu.com/p/83bda9cd8c67

1、refs

  <input type="text" ref="input">

  <div ref="div">222</div>

  <div ref={this.refHandle.bind(this)}>3333</div>

  则打印出来的 

  console.log(this.refs)    //object{input:input,div:div}

  ref是对元素添加的 一个属性,所有添加ref属性的元素,都将被放到一个对象中暂时储存起来,当想要访问这个DOM的时候,就可以通过this.refs.[name]来进行访问;

  ref的值不仅仅可以为一个名字,同时还可以为一个回调函数,

2、this.props

  <div name1="Jack" name2="Mary">666+++</div>

  则打印出来的

  console.log(this.props);          //object{name1:"Jack",name2:"Mary"}

  this.props将所有的元素中的属性都放到一个对象中储存起来,当利用的时候就可以通过this.props.[name]来调用这个属性;

3.生命周期函数

  3.1 componentDidMount() 再生命周期中只会调用一次,当渲染完成之后,标识已经渲染成为真实DOM插入html中,这时候获取元素就需要ref来获取。

  每次渲染之后都可以调用这个函数里面的逻辑,比如我this.setState()之后,更改了数据的内容,会引发组件的重新渲染。

4、父组件和子组件的互通

  父组件改变子组件,通过改变传入的props属性值即可。

  而子组件改变父组件的状态,则需要在父组件中创建钩子函数,然后让钩子函数通过props传递给子组件,并在子组件中执行。

  那么子组件与子组件之间的交互方式,也就是通过影响共同的父组件来进行交互的。一个子组件通过改变父组件中共同用的参数属性,就可以同时更改兄弟组件之间的变化。

  

 

关于react的一些疑问点的更多相关文章

  1. 个人对于React的Diff算法的一点疑问(待更新)

    本人对于Diff算法也并未做深入研究,只是大概的看过一些博文了解了些原理,但依然有了如下疑问 : 对于vdom所表示的对象中,若在该oldObj和newObj之间,发现一个元素节点所表示的子对象不见了 ...

  2. react 关于this.setState使用时,第一次无法获取数据,第二次获取的数据是第一次触发的疑问

    我使用的是antd组件, compareClickFn(orderCodes, fileNames) { printLog("orderCodes----------"+ orde ...

  3. react 疑问集锦

    在 setState 后未 re-render function component 初始化调用接口

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  7. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  8. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  9. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

随机推荐

  1. java动态规划问题

    这里是简单的动态规划问题.其实,如果我们学过数据结构,应该就接触过动态规划问题,当时一直没有反应过来.我们求最小生成树用的是贪婪算法.而求最短路径就是动态规划.从一个点出发,到另外每个点的最短距离.在 ...

  2. 上传工程到github

    这里主要讲讲如何在mac底下使用github,我刚开始使用时,还是费了一点功夫的,因为网上的资料比较杂,有些不是太准确.故将自己的安装过程比较详细的分享下,方便有需要的人,攒点人品. 首先你得完成如下 ...

  3. Java核心技术-异常、断言和日志

    程序发生错误时至少做到以下几点: *向用户通告错误 *保存所有的工作结果 *允许用户以妥善的形式退出程序 Java使用一种称为异常处理的错误捕获机制处理异常. 本章第一部分介绍Java的异常,第二部分 ...

  4. 路由软件quagga和bird日志配置打印ospf邻居变化

    背景: 网络侧反馈偶尔会出现ospf邻居状态变化:full-> other status -> full.历史原因,线上运行的路由软件有quagga和bird两种.两种路由软件的日志级别配 ...

  5. 40 Questions to test your skill in Python for Data Science

    Comes from: https://www.analyticsvidhya.com/blog/2017/05/questions-python-for-data-science/ Python i ...

  6. lintcode-单例

    单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应将其设计为 ...

  7. code1085 数字游戏

    划分dp 把环变链(读入4 3 -1 2变成4 3 -1 2 4 3 -1 2) 设dp[i][j][k]为把i~j分成k份,各部分内的数字相加,相加所得的k个结果对10取模后再相乘,最终得到的一个数 ...

  8. mybatis :xml文件中传入参数和if标签结合使用时要点

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.Reflecti ...

  9. hibernate方言

    hibernate中,方言是解决hql翻译成sql保证语法的正确,首先数据库都是支持sql的,不同的数据库会存在一些语法上面的差异.HQL则是基于对象的查询语言,当系统需要数据库的变换时,那么用hib ...

  10. 用nodejs搭建最简单、轻量化的http server(转)

    出处:http://www.cnblogs.com/wangfupeng1988/p/4143996.html 1. 引言 前端程序猿主要关注的是页面,你可能根本就用不到.net,java,php等后 ...