关于react的一些疑问点
参考转载:链接: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的一些疑问点的更多相关文章
- 个人对于React的Diff算法的一点疑问(待更新)
本人对于Diff算法也并未做深入研究,只是大概的看过一些博文了解了些原理,但依然有了如下疑问 : 对于vdom所表示的对象中,若在该oldObj和newObj之间,发现一个元素节点所表示的子对象不见了 ...
- react 关于this.setState使用时,第一次无法获取数据,第二次获取的数据是第一次触发的疑问
我使用的是antd组件, compareClickFn(orderCodes, fileNames) { printLog("orderCodes----------"+ orde ...
- react 疑问集锦
在 setState 后未 re-render function component 初始化调用接口
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- 基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...
随机推荐
- Linux内核SPI支持概述
1. 什么是SPI? Serial Peripheral Interface是一种同步4线串口链路,用于连接传感器.内存和外设到微控制器.他是一种简单的事实标准,还不足以复杂到需要一份正式的规范.SP ...
- 前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类 四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...
- 查看MSSQL数据库每个表占用的空间大小
需要查看数据库表的大小,查询SQL Server联机从书得到如下语句: sp_spaceused 显示行数.保留的磁盘空间以及当前数据库中的表所使用的磁盘空间,或显示由整个数据库保留和使用的磁盘空间. ...
- percona xtradb cluster test
docker run --rm -ti -e CLUSTER_NAME=test -e MYSQL_ALLOW_EMPTY_PASSWORD=1 --entrypoint="bash&quo ...
- 利用jekyll架设个人博客
jekyll简介 jekyll是一种可以将Markdown或Textile格式文本文件转换成静态网页的工具.利用jekyll编写发布博客的基本过程为: 使用任何一款编辑器编写符合Markdown或Te ...
- python's descriptor
[python's descriptor] 1.实现了以下三个方法任意一个的,且作为成员变量存在的对象,就是descriptor. 1)object.__get__(self, instance, o ...
- 如何用shell脚本执行或关闭jar包服务?
现在springboot很流行,但是大家都知道springboot是以jar包的方式进行打包的,那样就少不了开启或关闭服务的操作了,但是命令方式未免过于繁琐. 下面记录shell脚本的方式启动或关闭服 ...
- ssh的发展历程与基本原理
一.ssh是什么 SSH(Secure Shell)是一个提供数据通信安全.远程登录.远程指令执行等功能的安全网络协议,最初提出目的是替代非安全的Telnet.rsh.rexec等远程Shell协议. ...
- Cloud Foundry技术资料汇总
来自:http://cnblog.cloudfoundry.com/2012/05/ 本文是Cloud Foundry的一个简单上手指南和资料汇总,内容将根据产品的发布定期更新. Cloud Foun ...
- 5-SOM神经网络
https://blog.csdn.net/gavinlyy/article/details/8302814 https://blog.csdn.net/u011314012/article/deta ...