React.js，如何避免 var me = this？答案

【问题标题】：React.js, how to avoid var me = this?React.js，如何避免 var me = this？
【发布时间】：2016-09-21 06:28:58
【问题描述】：

想知道避免使用 var me = this; 的最佳方法在以下上下文中。此方法存在于 React 组件内部。我过去使用过 underscore.js 方法 _.bind() - 有没有更反应的方法？

    findRoutes: function(){
        var me = this;
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise(function(resolve, reject) {
            directionsService.route({
                origin: {'placeId': me.state.originId},
                destination: {'placeId': me.state.destinationId},
                travelMode: me.state.travelMode
            }, function(response, status){
                if (status === google.maps.DirectionsStatus.OK) {
                    // me.response = response;
                    directionsDisplay.setDirections(response);
                    resolve(response);
                } else {
                    window.alert('Directions config failed due to ' + status);
                }
            });
        });
        return p1
    },

【问题讨论】：

标签： javascript reactjs binding this

【解决方案1】：

保留正确的this 比 React 更多的是 JavaScript 问题。

1) 一种选择是使用.bind() 方法：

 findRoutes: function(){
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise(function(resolve, reject) {
            directionsService.route({
                origin: {'placeId': this.state.originId},
                destination: {'placeId': this.state.destinationId},
                travelMode: this.state.travelMode
            }, function(response, status){
               //...
            });
        }.bind(this)); // <----------- .bind(this)
        return p1
    },

.bind(this) 将创建一个与findRoutes() 函数具有相同this 的新函数。

2) ES6 的另一个选项是arrow function：

 findRoutes: function(){
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise((resolve, reject) => { // <------- used =>
            directionsService.route({
                origin: {'placeId': this.state.originId},
                destination: {'placeId': this.state.destinationId},
                travelMode: this.state.travelMode
            }, function(response, status){
               //...
            });
        });
        return p1
    },

箭头函数将从findRoutes() 中提取this。

See this article 了解更多关于 this 关键字的详细信息。

【讨论】：

【解决方案2】：

您可以使用 Arrow function 提供与 this 值的词法绑定

【讨论】：

【解决方案3】：

避免在上下文中引用它的建议是开始使用ES6's arrow functions

与函数表达式相比，箭头函数表达式的语法更短，并且在词法上绑定 this 值（不绑定自己的 this、arguments、super 或 new.target）。箭头函数始终是匿名的。

所以你可以使用箭头函数作为 promise 回调。

let p1 = new Promise((resolve, reject) => {
    resolve(this.state)
})

在我看来，在 React 项目中使用 ES6 的最佳方式是使用 Babel 编译 ES6 代码和使用 Webpack 进行模块捆绑。

这是开始使用 webpack 和 babel 的一个很好的项目示例：

https://github.com/choonkending/react-webpack-node

【讨论】：