深入理解React中es6创建组件this的方法

首发于：https://mingjiezhang.github.io/。 在JavaScript中，this对象是运行时基于函数的执行环境（也就是上下文）绑定的。 从react中的demo说起 Facebook最近一次更新react时，将es6中的class加入了组件的创建方式当中。Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类。官方的demo： class LikeButton extends React.Component { constructor() { super(); this.state = { like 在JavaScript中，`this`对象的绑定是在运行时基于函数的执行环境，即上下文进行的。在React中，随着ES6的引入，组件的创建方式发生了变化，Facebook推荐使用继承自`React.Component`的`class`来定义组件。下面我们将深入探讨在ES6中如何在React组件中正确处理`this`。 让我们看一个官方的React示例： ```jsx class LikeButton extends React.Component { constructor() { super(); this.state = {liked: false}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({liked: !this.state.liked}); } render() { const text = this.state.liked ? 'liked' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You {text} this. Click to toggle. </div> ); } } ReactDOM.render(<LikeButton />, document.getElementById('example')); ``` 在这个例子中，`this`的使用贯穿始终。在`class LikeButton extends React.Component`中，由于`this`的上下文取决于它被调用的位置，所以在类定义中我们不能确定`this`的具体含义。在构造函数中，`this.state`的`this`上下文是指向新创建的组件实例。同样，在`render()`方法中，`this.state.liked`的`this`上下文也是这个实例。 然而，问题出现在`onClick={this.handleClick}`这里。在旧版的`React.createClass`中，`handleClick()`在`onClick`事件触发时，会自动将其`this`上下文绑定到组件实例上。但在ES6的`class`语法中，React不再进行这种自动绑定。因此，当`handleClick()`被调用时，它的`this`上下文是触发事件的元素（通常是DOM元素），而不是我们期望的组件实例。 为了解决这个问题，我们可以采取以下几种策略： 1. **使用`bind()`函数**：在`constructor()`中，我们可以使用`this.handleClick = this.handleClick.bind(this)`来显式地绑定`this`。这样，无论何时调用`handleClick()`，`this`都会指向组件实例。但这种方法的一个缺点是`bind()`会产生新的函数实例，可能导致性能上的开销。 2. **在事件处理器中使用`bind()`**：另一种方法是直接在事件处理属性中绑定`this`，如`<div onClick={this.handleClick.bind(this)}>...</div>`。尽管这样可以避免在`constructor()`中重复绑定，但它要求每次渲染时都创建新的函数实例，可能也会影响性能。 3. **使用ES6箭头函数**：箭头函数不会创建自己的`this`上下文，而是继承自父级作用域。因此，我们可以像这样定义事件处理器：`<div onClick={() => this.handleClick()}>...</div>`。这样，`handleClick()`的`this`会指向包含它的类实例，避免了`bind()`的使用。然而，需要注意的是，由于箭头函数的特性，它们不适合作为类的方法，因为它们不能作为构造函数的一部分，也不能使用`super`关键字。 总结起来，`this`在React中的核心概念是它与作用域无关，只与执行上下文有关。在ES6的`class`组件中，我们需要特别注意`this`的绑定，以确保它指向正确的对象。使用`bind()`或箭头函数可以帮助我们解决`this`的绑定问题，但每种方法都有其优缺点，需要根据具体情况权衡选择。了解并熟练掌握这些技巧，将有助于我们更好地编写React组件。