Javascript 奇怪的类属性行为

我在用React，碰到了一些奇怪的东西

class C extends React.Component {

    componentDidMount = this.animate; // <---

    animate = () => ...

}

有人能很好地解释为什么需要这样做吗

class C extends React.Component {
   componentDidMount = this.animate; // <---
   animate = () => ...
}

然后，

componentDidMount

将引用之前分配给

animate

的功能

但是，如果要为类定义方法，则应检查的答案，因为如果编写，则不应使用赋值，而应使用方法定义

animate（）{}

class C extends React.Component {
   componentDidMount = this.animate; // <---
   animate = () => ...
}

然后，

componentDidMount

将引用之前分配给

animate

的功能

---

但是，如果要为类定义方法，则应检查的答案，因为不应使用赋值，而应使用方法定义

animate（）{}

，应将animate方法定义为类方法，而不是箭头函数

class C extends React.Component {
    componentDidMount = this.animate;
    animate() {}
}

---

应该将animate方法定义为类方法，而不是箭头函数

class C extends React.Component {
    componentDidMount = this.animate;
    animate() {}
}

---

---

可能

animate

在内部使用

this

，当通过

this.animate（）

调用时，这与通过

animate

的函数引用调用时不同。相反，请尝试：

componentDidMount=this.animate.bind（this）

绑定

thisArg

我认为这不是问题，因为第二个代码段工作得很好，表明调用实际上是问题所在，所以我的建议应该有效。显示

此函数的内容。设置
函数的动画我显示的只是一个示例。我想知道的是为什么这两个代码段不相等注意类属性不是ES6的一部分。可能
animate
在内部使用
this
，通过
this.animate（）
调用时与通过
animate
的函数引用调用时会有所不同。相反，请尝试：
componentDidMount=this.animate.bind（this）
绑定
thisArg
我认为这不是问题，因为第二个代码段工作得很好，表明调用实际上是问题所在，所以我的建议应该有效。显示
此函数的内容。设置
函数的动画我显示的只是一个示例。我想知道的是，为什么这两个代码段不相等请注意，类属性不是ES6的一部分？
animate
和
componentDidMount
是否应该是此组件的实例属性？您不应该像
animate（）{/*…*/}
或
animate:function（）{/*…*/}
等那样编写它吗？这些看起来像是全球性的variables@WilliamB指定在构建阶段进行评估，因此它们是实例属性。如果您编写
animate（）{/*…*/}
，那么它是类的一个方法，在构建阶段之前会被设置为原型链，因此OP当然也可以通过使用
animate（）{/*…*/}
来解决问题，这确实是一个更好的主意。方法是首选方法吗？原因是它们是在建筑时尚之前就被设定的？还有其他原因吗？@老实说，我现在无法告诉你标准是如何定义它的，但是如果你使用像babeljs这样的transpiler，那么通过
animate=（）=>…
语法，将为类的每个实例创建一个新的
（）=>…
（因此这将有一点开销）。使用
animate（）{}
时，所有实例将共享相同的函数。通常应始终使用
animate（）{}
。我目前没有想到
animate=（）=>…
可能有用的情况。@只是在对提到用例的另一个问题的评论中提问。对于箭头函数，
this
绑定到创建它们的
this
（在本例中是类的实例）。因此，如果您将函数用作回调函数，这可能很有用，因为您不需要手动将它们绑定到类的实例？
animate
和
componentDidMount
是否应该是此组件的实例属性？您不应该像
animate（）{/*…*/}
或
animate:function（）{/*…*/}
等那样编写它吗？这些看起来像是全球性的variables@WilliamB指定在构建阶段进行评估，因此它们是实例属性。如果您编写
animate（）{/*…*/}
，那么它是类的一个方法，在构建阶段之前会被设置为原型链，因此OP当然也可以通过使用
animate（）{/*…*/}
来解决问题，这确实是一个更好的主意。方法是首选方法吗？原因是它们是在建筑时尚之前就被设定的？还有其他原因吗？@老实说，我现在无法告诉你标准是如何定义它的，但是如果你使用像babeljs这样的transpiler，那么通过
animate=（）=>…
语法，将为类的每个实例创建一个新的
（）=>…
（因此这将有一点开销）。使用
animate（）{}
时，所有实例将共享相同的函数。通常应始终使用
animate（）{}
。我目前没有想到
animate=（）=>…
可能有用的情况。@只是在对提到用例的另一个问题的评论中提问。对于箭头函数，
this
绑定到创建它们的
this
（在本例中是类的实例）。因此，如果您将函数用作回调函数，这可能很有用，因为这样您就不需要手动将它们绑定到类的实例。这取决于方法的使用方式。OPs的使用表明他认为使用类方法，不是吗@FelixKlingIf它不在其他任何地方使用（例如，作为
渲染
中的事件处理程序），则为“是”。这就是我说的“视情况而定”的意思。@baao