react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整个人的状态是不好的,所以今天要好好学习bind(this)这个问题。
在我们创建一个组件的时候,会在他的父组件调用这个子组件,这是,这个组件的指向就是这个父组件了,但是在子组件内部的一些指向就不能使用了,因为在这个父组件中不存在这个子组件所包含的属性,此时,就需要使用bind(this)来绑定这个子组件,这样,这个子组件中函数的指向就是这个子组件自身了。
var Father = React.createClass({
click:function(){
//函数的一些业务逻辑
},
render:function(){
return (
//父级函数包含一个组件,并添加了一些属性,并具有业务逻辑
<List click={this.click} />
)
}
})
var List= React.createClass({
render:function(){
<ul>
//在子组件中调用这个函数的时候,如果不添加bind(this),这个函数的指向就是 li ,而不是这个click函数,所以需要添加bind(this)绑定这个函数指向正确
<li onClick={this.props.click.bind(this)}>name</li>
</ul>
}
})
在es5和es6中,有时候匿名函数会指向undefined和window,这是如果方法体内需要使用到当前的组件的this,就可以使用bind(this)进行绑定
其实我感觉整体来说,对于bind(this)绑定来说,可以说是在自己的组件创立,但是在其他地方调用的时候,因为指向已经改变了,所以,需要使用bing(this),让这个组件依然可以指向自己组件内部就可以了。
整体来说就是这样了,就看你的组件调用到什么地方了,,,好了,大概思路就是这样了
还有一种情况,就是bind(this,i,item),不仅绑定了this,还绑定了更多的参数,这个怎么理解呢,这个其实在react 的API上有介绍,但是当时看这个教程一眼带过,没有细看,现在饭回来看就可以理解了,地址:http://reactjs.cn/react/tips/communicate-between-components.html
var handleClick = function(i, props) {
console.log('You clicked: ' + props.items[i]);
}
function GroceryList(props) {
return (
<div> {props.items.map(function(item, i) {
return (
<div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div> ); }
)}
</div> );
}
ReactDOM.render( <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode );
具体解释可以这么理解,对于handleClick(i ,props) 这个函数中,含有两个参数,在调用这个组件的时候,我们绑定了这个函数,这一点没有问题,但是有的会疑惑后面的i
和props是什么鬼,这里有解释:
注意使用bind(this, arg1, arg2, ...)
:我们只是传递更多的参数handleClick
。这不是一个新的React概念; 它只是JavaScript。
也就是这个不是react的bind(this)的一个概念,这个是我们前面创建的handleClick (i,props)函数里面传递的两个参数,只是在bind(this)的后面添加这个函数了而已。
react.js学习之路四的更多相关文章
- react.js学习之路二
看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...
- react.js学习之路三
学习react.js,知识点整理: 1.props和state: props是相对于父级来说,固定的不会改变的内容.一般会先定义一个变量,则在父级中进行引用, var user = "liu ...
- react.js学习之路一
今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...
- react.js学习之路六
学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框 ...
- react.js学习之路五
最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...
- 【温故知新】——BABYLON.js学习之路·前辈经验(二)
前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
- React.js学习知识小结(一)
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...
- React.js学习小结
最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...
随机推荐
- Proxmark3笔记(一)
Kali下使用Proxmark3 apt-get update apt-get install build-essential libreadline5 libreadline-dev libusb- ...
- 如何查看apache加载了哪些模块
apache2/bin/apachectl -l 可以看到类似下面的结果: 这是编译时就已编译在apache中的模块,启动时自然会加载. 另外一部分,要看apach的配置文件(httpd.conf)的 ...
- flask系列三之Jinja2模板
1.如何渲染模板 模板在‘templates’文件夹下(htnl页面) 从flask中导入render_template函数---渲染html模板 在视图函数中,使用render_template 函 ...
- C++深度解析教程学习笔记(6)对象的构造和销毁
1. 对象的初始化 (1)从程序设计的角度看,对象只是变量,因此: ①在栈上创建对象时,成员变量初始化为随机值 ②在堆上创建对象时,成员变量初始化为随机值 ③在静态存储区创建对象时,成员变量初始化为 ...
- html-select
<html><head> <title>select选择标签</title> <meta charset="UTF-8"> ...
- yii2 源码分析1从入口开始
我是在 backend 一步步打印的 很多地方我也是很模糊 .后来发现一位大神的文章(http://www.yiichina.com/tutorial/773) 参考文章自己动手开始写的 至于后来的 ...
- jQuery 对象和 json 之间的转换
JSON.parse() json 转换成 对象 JSON.stringify() 对象转换成json 想问下广大网友大神 js 里面有数组转换或者转换成数组的函数么?小弟等--
- Log4php使用指南
一.Log4php简介 Log4php是Log4xx系列日志组件之一,是Log4j迁移到php的版本,主要用来记录日志信息,支持多种输入目的地,包括:日志文件.日志回滚文件.数据库.日志服务器等等 ...
- 框架面试题:谈谈我对Spring IOC与DI的理解
IOC是一种叫做“控制反转”的设计思想. 1.较浅的层次——从名字上解析 “控制”就是指对 对象的创建.维护.销毁等生命周期的控制,这个过程一般是由我们的程序去主动控制的,如使用new关键字去创建一个 ...
- Linux mii-tool命令
一.简介 mii-tool 是一个用来查看,管理介质的网络接口的状态的工具. 二.选项 usage: mii-tool [-VvRrwl] [-A media,... | -F media] [int ...