javascript - React的生命周期方法是自动绑定(bind)的吗？如果不是，我们应该用 .bind(this) 绑定(bind)它们吗？

Question

我认为标题非常具有 self 描述性。

我使用类表示法构建了 React 组件，我注意到虽然 handleSomething 必须手动绑定(bind)到 this，render而 componentWillMount 则不然。方法是否已绑定(bind)到 this ？为了符号上的一致性，可以手动绑定(bind)吗？

Answer 1

理解 JavaScript 中的“this”

函数中的“this”关键字由函数的执行范围决定。例如，使用 obj.someFunction() 调用时，someFunction 中的 this 将为 obj。

更具体的例子:

function handleClick() {
    console.log(this.state.value);
}

var state = { value: 1 }; // declare a var in window
console.log("handleClick()");
handleClick(); // Logged 1. The 'this' in the method will be window, because the method is called in window


var obj = {
  state: { value: 2 },
  handleClick: function() {
    console.log(this.state.value);
  },
};
console.log("obj.handleClick();");
obj.handleClick(); // Logged 2. The 'this' is referred to obj because the method is called in obj.

// let's reassign the function to a temp var in window
var temp = obj.handleClick;
console.log("temp()");
temp(); // Logged 1. The 'this' in the function is referred to window because the method is called in window.
console.log("window.temp()");
window.temp(); // this is equal to the one above.

console.log("temp.bind(obj)");
temp.bind(obj)(); // Logged 2. Bind the method and call the method, so the 'this' in the function is referred to obj.

console.log("temp.bind(this)");
temp.bind(this)(); // Logged 1. Since this in the executing scope is window. This effectively is the same calling in this.

console.log("temp.bind(window)");
temp.bind(window)(); // Logged 1. This is equal to the one above.

在这里试试:https://codepen.io/anon/pen/OvOpEa?editors=0012

关于此的博客文章:https://hackernoon.com/understanding-javascript-the-this-keyword-4de325d77f68

回到你的问题

如果您查看在类中定义的 render、componentWillMount 和 handleSomething，就会清楚为什么需要绑定(bind)您的this 的处理程序。

渲染

// Rerender
ReactCurrentOwner.current = workInProgress;
var nextChildren = void 0;
{
  ReactDebugCurrentFiber.setCurrentPhase('render');
  nextChildren = instance.render();
  if (debugRenderPhaseSideEffects) {
    instance.render();
  }
  ReactDebugCurrentFiber.setCurrentPhase(null);
}

这就是 React 调用 redner() 的方式，其中实例是具有状态、 Prop 等的对象实例。您可以通过在渲染方法中放置断点并继续执行来轻松尝试它返回调用堆栈。

处理一些东西

例如，如果您像这样定义类，并使用 handleSomething 作为按钮的 onClick 回调方法。

class Button extends Component {
  handleSomething() {
    // 'this' will be undefined.
  }

  render() {
    return (<button onClick={this.handleSomething}>Test</button>);
  }
}

如果单击按钮，这就是 React 调用 onClick 处理程序方法的方式。

  function callCallback() {
    fakeNode.removeEventListener(evtType, callCallback, false);
    // This is where react calls your method.
    func.apply(context, funcArgs);
    didError = false;
  }

其中func是handleSomething，并且context在我的调试经验中通常是undefined，并且 funcArgs 是在函数中传递的参数。

apply 与bind 类似。第一个参数用于指定函数的 this，第二个参数是要传递到函数中的参数数组。

有关申请的更多信息，请参阅 MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

在本例中，方法 handleSomething 正在使用 undefined 作为 this 进行调用；因此，如果您没有绑定(bind)该方法，您的 this 将是 undefined。

I noticed that while handleSomething has to be manually bound to this, render and componentWillMount do not. Are method bound to this already?

它们是用您的类的实例调用的，因此它们已经将 this 作为您的实例，而无需使用 bind。我想你可以说它已经绑定(bind)到 this。

Is it ok to bind manually for notationally consistency's sake?

您不需要将 this 与 React 的生命周期方法绑定(bind)。如果你真的愿意，我想你也可以将这些方法绑定(bind)到 this 上(可能会有一些我不知道的副作用，因为我并没有真正深入研究它们的源代码)，但这就像执行 obj.handleClick.bind(obj)(); 而不是 obj.handleClick();。这是不必要的，并且会花费一些时钟周期来做一些不需要的事情。