小编典典

ES2015类是否“不自动绑定”?

reactjs

我已经使用React一段时间了,我对必须手动将组件方法绑定到组件实例的概念感到满意,因为React决定不自动绑定是“惯用的”:

因此,我们决定不将此内置到React的类模型中。如果需要,您仍然可以在构造函数中显式预绑定方法。

class Counter extends React.Component {
  constructor() {
    super();
    this.tick = this.tick.bind(this);
  }
  tick() {
    ...
  }
  ...
}

-
https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

在以下示例中,我们可以从类似的问题中清楚地看到此效果http://jsbin.com/citafaradu/2/edit?js,console,output如何使用babelify正确绑定ES6中的当前对象上下文

但是,最近有人问我基于原型的类和新的ES2015类之间是否有区别。 凭直觉,这个答案应该是明确的“不!”
,因为生成的实例对象自然会具有正常的原型并具有良好的行为……就像JS对象一样!而且,没有绑定到实例的实例方法的用途是什么?

我试图寻找任何迹象表明这对es6类是“偶发”的,但是我发现的只是React开发人员提出的其他问题,答案如下:

React的ES6类没有自动绑定。在此处进行记录:https : //facebook.github.io/react/docs/reusable-
components.html#no-
autobinding

原因是javascript的ES6类没有自动绑定。React尝试不重新发明javascript中已经存在的东西。ES5没有很好的类语法,因此React必须发明自己的类。但是现在有了ES6类,我们可以只使用标准的javascript。

-“科迪”,https://github.com/facebook/react/issues/4065

现在我真的很困惑。这也许是JSX移植的技巧吗?看一下先前示例的render方法的输出:

{
    key: "render",
    value: function render() {
      return React.createElement("div",null,
        React.createElement("input", { 
          type: "text", onChange: this.handleBindedChange 
        }),
        React.createElement("br", null),
        React.createElement("input", { 
          type: "text", onChange: this.handleUnbindedChange 
        }),
        React.createElement("br", null),
        React.createElement("p",null,"Result: ",this.state.demo)
     );
    }
 }

这里也没有骰子-babel输出使用Object.defineProperty,它将绝对添加与它绑定的函数绑定到它们所附加的对象。

因此,我很茫然。我在此问题上得到的大多数回应都比es2015最终规范更早-
因为我在规范本身中找不到任何相关信息,是否有任何变更会使React团队的方法无效?这是我以某种方式曲解的奇怪的人工翻译产物吗?反应是在幕后做些古怪的事引起的吗?如果是这样,为什么他们会反复声称这样做是为了符合ES2015标准?如果不是,那么是什么导致给出的第一个示例中出现的行为?


阅读 221

收藏
2020-07-22

共1个答案

小编典典

我有类似的问题。您的类中的方法将能够引用同一类中的其他方法,因为它们是同一上下文的一部分(https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/this)。

此示例说明了类中的方法可以访问属性this而无需在构造函数中进行绑定:http
:
//jsbin.com/tapokotahi/1/edit?js,console,output。该renderElements方法未绑定,但正在访问this.state

将类方法传递到事件处理程序时,必须将它们绑定(或定义为箭头函数),因为执行上下文从类的上下文更改为事件处理程序的上下文。

我同意,当我们阅读React文档时,这似乎令人困惑,他们告诉我们需要在构造函数中绑定方法,但这仅在将方法传递给React的事件处理程序(例如)时才需要onClick

2020-07-22