react系列-bind this

XGBCCC 发布于2019-08-21 14:38 / 2932人阅读

摘要：幸运的是，已经提供了对这个新语法的支持。而且函数绑定语法属于草案中的特性，尚未纳入标准。方案和方案会增加代码量方案需要引入第三方库，不过提供了很多使用的装饰器。常用的方案是方案和方案删除箭头函数删除

问题

对于大多数前端开发来说，JavaScript 的 this 关键字会造成诸多困扰，由于 JavaScript 代码中的 this 指向并不清晰。在写react应用时，也会也到很多作用域绑定引起的问题，React组件ES6的写法，不会将方法内部的作用域自动绑定到组件的实例上。

下面展示一段问题代码

class Search extends Component {
    static propTypes = {
        onSearch: React.PropTypes.func.isRequired
    }
    onSearch() {
        console.log("表单值：", this.field.getValues());
        this.props.onSearch(this.field.getValues());
    }
    render(){
        const {init} = this.field;
        return 
            
                    
                        
                    
                    
            
        
    }
}

如果你真的尝试这么做了, 你会发现在onSearch中，因为this指向的是全局对象window而报错。

解决办法

我们都知道常规改变函数作用域的无非3种（Fiontion.prototype.bind call apply 三兄弟）,下面讲解一下在es6中bind作用域的几种方式。

使用Function.prototype.bind()

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

ES7函数绑定语法
在 ES7 中，有一个关于 bind 语法的提议，提议将 :: 作为一个新的绑定操作符, 而且已经收录在stage-0提案中，实际上::是Function.propotype.bind()的一种语法糖。幸运的是，Babel已经提供了对这个新语法的支持。

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

在构造函数中bind this

    class Search extends Component {
    constructor(props) {
        super(props);
        this.onSearch = this.onSearch.bind(this)
    }
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

使用箭头函数

class Search extends Component {
    render(){
        return 
            
                    
                        
                    
                    
            
        
    }
}

core-decorators.js
core-decorators.js为开发者提供了一些实用的 decorator，其中实现的autobind修饰器能使得方法中的this对象绑定到原始对象

class Search extends Component {
    @autobind
    onSearch() {
        console.log("表单值：", this.field.getValues());
        this.props.onSearch(this.field.getValues());
    }
    render(){
        const {init} = this.field;
        return 
            
                    
                        
                    
                    
            
        
    }
}

总结

比较

这里我们讨论下以上几种将this绑定到react组件方案的缺点，优点自己体会吧。
方案1和方案2，缺点也很严重，这种方式破坏了组件的pure render，每次组件render时，子组件Button的onClick值都是重新赋值所得，会导致Button做一次无谓的render。而且函数绑定语法::属于es7草案中的特性，尚未纳入es标准。使用需要谨慎。
方案3和方案4会增加代码量
方案5需要引入第三方库，不过core-decorators.js提供了很多使用的装饰器。

场景

某些场景下，我们需要传递额外的参数，比如列表中删除操作，需要传id。常用的方案是方案1和方案4

// Function.prototype.bind()
删除
// 箭头函数
{
    this.doDelete(id, ...args)
}}>删除

GPU云服务器云服务器 bind() bindings Binding bind

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87979.html

从 0 到 1 实现 React 系列 —— 4.优化setState和ref的实现

摘要：异步渲染利用事件循环，延迟渲染函数的调用调用回调函数处理后跟函数的情况浅合并逻辑事件循环，关于的事件循环和的事件循环后续会单独写篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 Rea...

wangdai 2019-08-23 10:43 评论0 收藏0
React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
React 深入系列5：事件处理

摘要：使用匿名函数先上代码代码点击的事件响应函数是一个匿名函数，这应该是最常见的处理事件响应的方式了。事件响应函数的传参问题事件响应函数默认是会被传入一个事件对象作为参数的。关于事件响应函数，还有一个地方需要注意。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 Web应用中，事件处理是重要的一...

willin 2019-08-22 17:28 评论0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，将介绍开发应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。本篇是React深入系列的最后一篇，将介绍开发React应用时，经常用到的模式，这些模式并非都有...

Chao 2019-08-22 17:28 评论0 收藏0
React.js 小书 Lesson9 - 事件监听

摘要：在不需要手动调用浏览器原生的进行事件监听。没有经过特殊处理的话，这些的事件监听只能用在普通的的标签上，而不能用在组件标签上。的事件监听方法需要手动到当前实例，这种模式在中非常常用。下一节中我们将介绍小书组件的和。 React.js 小书 Lesson9 - 事件监听本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson9 转载请...

yanbingyun1990 2019-08-21 17:33 评论0 收藏0