react的生命周期方法是否自动绑定？如果不是，我们应该用.bind（this）绑定它们吗？ [英] Are react's lifecycle method autobound? If not should we be binding them with .bind(this)?

问题描述

我认为标题是很容易描述的。

I think the title is pretty self-descriptive.

我已经使用类符号构建了react组件，并且注意到 handleSomething 必须手动绑定到 this ， render 和 componentWillMount 不要。方法已经绑定到 this 吗？

I've building react components using the class notation, and I noticed that while handleSomething has to be manually bound to this, render and componentWillMount do not. Are method bound to this already? Is it ok to bind manually for notationally consistency's sake?

推荐答案

在JavaScript中理解 this是可以的吗？

函数中的 this关键字由函数的执行范围决定。例如，使用 obj.someFunction（） someFunction 中的 this c $ c>将是 obj 。

Understanding of 'this' in JavaScript

The 'this' keyword in a function is determined by the executing scope of the function. For example, the this in someFunction when calling with obj.someFunction() will be 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

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

A blog post about this: https://hackernoon.com/understanding-javascript-the-this-keyword-4de325d77f68

如果您查看<$在您的课程中定义的c $ c> render ， componentWillMount 和 handleSomething 显而易见，您为什么需要将处理程序绑定到 this 。

If you look at render, componentWillMount, and handleSomething you defined in your class, it will become apparent why you need to bind your handler to this.

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

这是调用 redner（）的反应方式，该实例是具有状态，道具等的对象实例。您可以通过在您的render方法中放置一个断点并返回调用堆栈来轻松地进行尝试。

This is how react call redner(), where the instance is the object instance that has state, props, etc. You can try it very easily by putting a breakpoint in your render method and go back a call stack.

例如，如果您定义此类，则 handleSomething 为按钮的 onClick 回调方法。

For example, if you define your class like this, with handleSomething as the onClick callback method of the button.

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

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

如果您单击按钮，这就是响应电话的方式

If you click the button, this is how react calls the onClick handler method.

  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 是在函数中传递的参数。

where func is handleSomething, and context is usually undefined in my debugging experience, and funcArgs is the arguments that being passed in the function.

应用与 bind 类似。第一个参数用于指定函数的 this ，第二个参数是传递给函数的参数数组。

apply is similar to bind. The first argument is used to specify the this of the function, and the second argument is an array of parameters to pass into the function.

有关应用的更多信息，请参见MDN： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

See MDN for more information about apply: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

在这种情况下，使用 undefined handleSomething >为 this ;因此，如果您未绑定该方法，则您的 this 将为 undefined 。

In this case, the method handleSomething is being called with undefined as this; Therefore, if you didn't bind the method, your this will be undefined.

我注意到，虽然handleSomething必须手动绑定到此，但
render和componentWillMount却不需要。方法已经绑定到该
了吗？

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

它们是用您的类的实例调用的，因此它们已经具有此作为您的实例，而不使用绑定。我想你可以说它已经绑定到 this 。

They are called with the instance of your class, so they already have this as your instance without using bind. I guess you can kind of say it's already bound to this.

是可以为了符号上的一致性而手动绑定吗？

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

您不需要绑定 this 和react的生命周期方法。如果您确实愿意，我想您也可以将这些方法绑定到 this （可能会有一些我不知道的副作用，因为我实际上并没有深入了解其来源），但这就像做 obj.handleClick.bind（obj）（）; 而不是 obj.handleClick（） ; 。这是不必要的，并且会花费一些时钟周期来执行不必要的操作。

You don't need to bind this with react's lifecycle methods. If you really want to, I guess you can bind those methods to this as well (there might be some side effects that I don't know, since I didn't really look that deeply into their source), but this is like doing obj.handleClick.bind(obj)(); instead of obj.handleClick();. It is unnecessary and will spend some clock cycles doing something that's not needed.

这篇关于react的生命周期方法是否自动绑定？如果不是，我们应该用.bind（this）绑定它们吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！