Зачем использовать функциональные Компоненты без сохранения состояния вместо Компонентов на основе классов?

Question

Я изучаю ReactJS и узнал, что есть компоненты пользовательского интерфейса и компоненты контейнера.Контейнерные компоненты реализованы с использованием classes расширение React.Component и содержат state и старый добрый метод render, тогда как компоненты пользовательского интерфейса создаются с использованием functions, и они касаются только пользовательского интерфейса, поскольку они только принимают данные изprops.

Пример функциональных компонентов без сохранения состояния:

const Ninjas = (props) => {
    const { ninjas } = props;

    const ninjalist = ninjas.map((x) => {
        var divStyle = {
            color: getRandomColor(),
        };

        return (
            <div className="ninja" key={x.key} style={divStyle}>
                <p>Name: {x.name}</p>
                <p>Age: {x.age}</p>
                <p>Belt: {x.belt}</p>
            </div>
        );
    });
    return <div className="ninja-list">{ninjalist}</div>;
};

export default Ninjas;

Тот же образец, что и у компонента-контейнера

export default class Ninjas extends Component {
    getRandomColor = () => {
        ....
        return color;
    };

    render() {
        const { ninjas } = this.props;

        const ninjalist = ninjas.map((x) => {
            var divStyle = {
                color: this.getRandomColor(),
            };

            return (
                <div className="ninja" key={x.key} style={divStyle}>
                    <p>Name: {x.name}</p>
                    <p>Age: {x.age}</p>
                    <p>Belt: {x.belt}</p>
                </div>
            );
        });
        return <div className="ninja-list">{ninjalist}</div>;
    }
}

Поэтому мой вопрос: почему мы вообще беспокоимся осоздать компонент пользовательского интерфейса (не используя метод render, который используется в компоненте контейнера), когда мы могли бы легко сделать то же самое, что и компонент контейнера.

Answer 1

Функциональные компоненты без состояния (то, что вы ошибочно называете Компонентами пользовательского интерфейса, все компоненты являются компонентами пользовательского интерфейса как с полным состоянием, так и без состояния), представляют собой простой способ для создания компонентов, которые просто визуализируют что-то на основе пропущенных и выполняемых операцийне нужно поддерживать внутреннее состояние .

Конечно, всегда можно использовать компоненты на основе классов, которые расширяют React.Component.Но почему бы не иметь средства, чтобы сэкономить время и пространство и упростить вещи, если мы можем.Ничто не заставляет вас создавать функциональные компоненты, вы всегда можете использовать компоненты на основе классов, только если вам нужно упростить и сэкономить время и пространство.

В соответствии с Функциональные и классовые компоненты в React article:

Так зачем мне вообще использовать функциональные компоненты?

Вы можете спросить себя, зачем вообще использовать функциональные компоненты, если ониудалить так много приятных функций.Но есть некоторые преимущества, которые вы получаете, используя функциональные компоненты в React:

1. Функциональные компоненты намного легче читать и тестировать, потому что они представляют собой простые функции JavaScript без состояний или ловушек жизненного цикла
2. В итоге вы получаете меньше кода
3. Они помогают вам использовать лучшие практики.Разделить контейнерные и презентационные компоненты будет проще, потому что вам нужно больше думать о состоянии вашего компонента, если у вас нет доступа к setState () в вашем компоненте
4. Команда React упомянула, что производительность может бытьповышение функционального компонента в будущих версиях React

Я бы добавил 5-ую точку , которая Ссылки React (с React 16.3+), которые обеспечивают функциональностьпрямой доступ к узлам DOM нельзя использовать с функциональными компонентами.

В React v.16.8 + useState представлены хуки , которые позволяют функциональным компонентам заполняться состоянием, оставаясь при этом функциональными.,

Кроме того, с введением React.memo компонента более высокого порядка мы можем использовать памятку, чтобы избежать повторного рендеринга функционального компонента , учитывая, что он выполняет те же вещи дляте же реквизиты (неглубокие испытания на разницу)