javascript - 在react/es6 如何分辨需要bind和不需要
高洛峰
高洛峰 2017-04-11 12:38:35
[JavaScript讨论组]

你好,正在學習react和es6.

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

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

class Example extends React.Component { 
    getTitle() {...}
    
    render() {
        return(
            

) } } class Example2 extends React.Component { contructor() { super(); this.handle = this.handle.bind(this); } handle() {...} render() { return(

{this.handle()} //綁定當前instance

) } }

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

謝謝(新手)

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(6)
ringa_lee

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

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

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

PHPz

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

ringa_lee

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

PHP中文网

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

PHPz

我的总结比较简单,

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

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

巴扎黑

if((生命周期里调用的函数||用户操作事件里调用的函数)&&该函数里有用到this指向该组件对象&&该函数是在react组件里的一个自定义函数){

就要需要这样做:constructor(props){
                   super(props);
                   this.state = {xxx:xxx,...}
                   this.func = this.func.bind(this);
                   ...
               }

}
还有一种情况:当生命周期里或者时间里调了一个自定义函数func1,那么这个不需要在constructor里bind,如果func1里又调了一个自定义函数func2,并且func2里有用到this指向改组件对象,那么这个"----func1----"需要在constructor里bind(this),记住是func1。
至于为什么会出现这种情况,根据以上逻辑自己推敲吧,追踪this指向控制台打印this。到最后你会发现,class Reactcomponent extends Component{}里的所有的自定义函数,一开始就在constructor里this.func = this.func.bind(this)这样做是最好的。踩过的坑多了你就位列神位了!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号