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)的后面添加这个函数了而已。