奇怪的 class 属性行为

Question

我在使用 React 时遇到了一些奇怪的事情。

class C extends React.Component {

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

    animate = () => ...

}

这没有用，所以我不得不更改 componentDidMount 的值并且它起作用了：

class C extends React.Component {

    componentDidMount = () => this.animate(); // Lambda is required?

    animate = () => ...

}

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

Answer 1

如果你写

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

然后componentDidMount设置为undefined因为当时没有设置animate

对于 componentDidMount = () => this.animate();，每次调用 componentDidMount 时都会解析 this.animate();，这就是为什么这对您有用。

如果你这样写:

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

然后componentDidMount会引用你之前分配给animate的函数。

但是如果你想为 class 定义方法，你应该检查的答案，因为那样你不应该使用赋值，而应该使用方法定义 animate() {}

Answer 2

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

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

Weird class property behaviour