Question

我已经阅读了React Docs关于构造函数方法以及它可以用于设置状态和绑定函数的内容，但在大多数情况下它是否真的有必要？

做

之间有什么区别

export default class MyClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            foo: 'bar',
        };
        this.member = 'member';
        this.someFunction = this.anotherFunction(num);
    }
    anotherFunction = (num) => num * 2;
    render() {
        // render jsx here
    }
}

并简单地将所有内容放在构造函数之外，如

export default class MyClass extends Component {
    state = {
        foo: 'bar',
    };
    member = 'member';
    someFunction = this.anotherFunction(num);
    anotherFunction = (num) => num * 2;
    render() {
        // render jsx here
    }
}

一个选项是否优先于另一个选项，是否存在我应该了解的任何性能问题？这一直困扰着我，我似乎找不到具体的答案。

Answer 1

你的两个例子在功能上是相同的，但关键是在类方法之外分配东西，但在类的主体内部分配，就像你拥有render和constructor以外的所有东西一样，不是标准的ES6，只能通过Babel工作。该语法是建议的class property syntax。

反应中的构造方法

1 个答案: