在react/es6 如何分辨需要bind和不需要

Decade_Hew
  • 235

你好,正在學習react和es6.

我也有上去爬過之前的帖子,但是還是無法搞清楚

以下是我遇到問題稍微描述:

class Example extends React.Component { 
    getTitle() {...}
    
    render() {
        return(
            <div>
            
            </div>
        )
    }
}

class Example2 extends React.Component { 
    contructor() {
        super();
        this.handle = this.handle.bind(this); 
    }
    
    handle() {...}
    
    render() {
        return(
            <div>
                {this.handle()}  //綁定當前instance
            </div>
        )
    }
}

為什麼有些需要綁定函數,有些不用?
要如何分辨?

謝謝(新手)

回复
阅读 6k
7 个回答

其实上面回答的就是答案了。

详细点说,当一个函数在不同context执行时,往往this的指向都会不同,例如在setTimeout里的函数通常都会指向全局。

所以为了确保this的指向如我们所要的一样,就要把函数的this绑定我们所要的context的this。简单来说,当你这个函数会用到this,或者this会影响你的函数的,都需要绑定context。

就React的话,如果你使用es6的语法构建组件,那么在你组件里写的函数在构造器里都需要手动绑定this,如果使用es5的React.createClass()创建组件,this反而会自动绑定为当前组建实例。手机回答的,格式不太标准,明天再修改格式。

就是为了避免this的指向错了,不想这样的话可以写arrow func

上面几位都说的不错,主要就是为了保证this的指向,在this指向不正确的时候使用bind,改变this的指向

anderzack
  • 4
新手上路,请多包涵

我的总结比较简单,

  • 需要传参的时候,就用this.xxx.bind(this,yyy)

  • 不需要传参的时候就直接this.xxx

可以在你的回调里设个断点,如果有环境就不需要绑定了,一般需要绑定。

Winter
  • 2
新手上路,请多包涵

我bind了两次,结果有问题,不知道什么原因

你知道吗?

宣传栏