我已经使用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
因此,我们决定不将此内置到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
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标准?如果不是,那么是什么导致给出的第一个示例中出现的行为?
我有类似的问题。您的类中的方法将能够引用同一类中的其他方法,因为它们是同一上下文的一部分(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。
this
renderElements
this.state
将类方法传递到事件处理程序时,必须将它们绑定(或定义为箭头函数),因为执行上下文从类的上下文更改为事件处理程序的上下文。
我同意,当我们阅读React文档时,这似乎令人困惑,他们告诉我们需要在构造函数中绑定方法,但这仅在将方法传递给React的事件处理程序(例如)时才需要onClick。
onClick