Каковы плюсы / минусы и лучшие практики для создания функций для класса React Component?

Оба эти класса делают одно и то же, но ClassA кажется избыточным из-за привязки, которую вы должны выполнять каждый раз, когда объявляете функцию, а ClassB не выглядит таким же чистым, как ClassA, из-за различий в типах создания функций.

class ClassA extends React.Component {
    constructor() {
        super();
        this.state = { message: "bar" };
        this.foo = this.foo.bind();
    }
    foo() {
        console.log(this.state.message);
    }
    render() {
        return <SomeComponent foo={this.foo} />;
    }
}

class ClassB extends React.Component {
    constructor() {
        super();
        this.state = { message: "bar" };
    }
    foo = () => {
        console.log(this.state.message);
    }
    render() {
        return <SomeComponent foo={this.foo} />;
    }
}

Чтобы избавиться от различий создания функций в ClassB, вы, вероятно, можете сделать что-то вроде этого, где все является выражением.

class ClassC extends React.Component {

    state = { message: "bar" }

    foo = () => {
        console.log(this.state.message);
    }
    render = () => {
        return <SomeComponent foo={this.foo} />;
    }
}

Каковы плюсы и минусы между объявлениями функций и выражениями в этом случае? Есть ли различия в производительности, памяти или даже в удобстве обслуживания?

Редактировать: я думаю, с сегодняшней стандартной технологией разница в производительности не очень заметна. Я думаю, что я действительно хочу из этого вопроса, что является лучшей практикой для создания функций для класса (особенно компонент React)

0 ответов

Другие вопросы по тегам