Основное использование useState

Содержание

Вопрос или проблема
Ответ или решение
Основы использования useState в React

Вопрос или проблема

Обновление состояния приводит только к перерисовке кнопки (см. прикрепленное видео), а не всего компонента. Разве не предполагается, что React должен перерисовывать весь компонент, к которому принадлежит состояние?

https://youtube.com/shorts/FjcZE-sWh3c

export default function Edit({ className, attributes, setAttributes }) {
    const [video, setVideo] = useState("3TgzifjO15g");

    const addVideo = () => {
        setVideo(attributes.videoId);
    };

    return (
        <div {...useBlockProps()}>
            <div className="wrapper">
                <TextControl
                    label="ID видео YouTube"
                    help="Что-то похожее на: DyTCOwB0DVw"
                    className={className}
                    value={attributes.videoId}
                    onChange={(val) => setAttributes({ videoId: val })}
                />
                <Button isPrimary onClick={addVideo}>
                    Добавить видео. добавлено: {video}
                </Button>
                <Player controls>
                    <Youtube videoId={video} />
                </Player>
            </div>
        </div>
    );
}

Это работает. Я не уверен, почему, но отделив компонент Player в другой компонент, я могу обновить компонент из обратного вызова кнопки.

Просто чтобы объяснить использование useState здесь: атрибут videoId сохраняется в блоке разделителя комментариев при сохранении поста. Это уже достигнуто, это не проблема. То, что мне нужно, это способ предварительного просмотра видео в плеере внутри редактора, когда оно было выбрано в компоненте TextControl.

Этот плеер не может быть отрисован с помощью обратного вызова onChange в Texcontrol, потому что он попытается обновлять его с каждым введенным символом. По этой причине я включил кнопку, которая обновляет плеер, когда ID уже полностью написан.

export default function Edit({ className, attributes, setAttributes }) {
    const [video, setVideo] = useState("");

    const addVideo = () => {
        setVideo(attributes.videoId);
    };

    const AgVideo = () => {
        return (
            <Player controls>
                <Youtube videoId={video} />
            </Player>
        );
    };

    return (
        <div {...useBlockProps()}>
            <div>
                <TextControl
                    label="ID видео YouTube"
                    help="Что-то похожее на: DyTCOwB0DVw"
                    className={className}
                    value={attributes.videoId}
                    onChange={(val) => setAttributes({ videoId: val })}
                />
                <Button isPrimary onClick={addVideo}>
                    Добавить видео. добавлено: {video}
                </Button>
                <AgVideo />
            </div>
        </div>
    );
}

Ответ или решение

Основы использования useState в React

Введение в useState

useState — это один из самых часто используемых хуков в React, который позволяет разработчикам управлять состоянием функциональных компонентов. Ваша задача, как разработчика, заключается в том, чтобы создать интуитивно понятное и отзывчивое приложение, и управление состоянием играет ключевую роль в этом процессе.

Использование useState в контексте вашего примера

В представленном вами примере кода, useState используется для создания состояния video, который является идентификатором видео на YouTube. В этом контексте, когда вы нажимаете кнопку, вызывается функция addVideo, которая обновляет состояние video новым значением, взятым из пропа attributes.videoId. Это изменение вызывает повторный рендеринг компонента, что позволяет обновить отображаемое видео.

const [video, setVideo] = useState("3TgzifjO15g");

Почему обновляется только кнопка, а не весь компонент?

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

Решение с использованием дополнительного компонента

Вы отмечаете, что разделение плеера в отдельный компонент решает проблему с обновлением. Это подход, который действительно может помочь, поскольку когда AgVideo создается как отдельный компонент, React сможет оптимально управлять его рендерингом. Изменение состояния video будет влиять не только на кнопку, но и на компонент плеера.

Вот ключевое изменение:

const AgVideo = () => {
    return (
        <Player controls>
            <Youtube videoId={video} />
        </Player>
    );
};

Таким образом, если video обновляется через кнопку, новый компонент AgVideo будет повторно рендериться с новым значением video, что решает проблему с отображением актуальной информации.

Почему важно правильное использование метода обновления состояния?

Вы правильно заметили, что использование onChange в TextControl приводит к множественным вызовам обновления. Таким образом, это создаст нагрузку на производительность и возможность частых сбоев в UI. Поэтому вы решили использовать кнопку для обновления состояния в момент, когда пользователь завершит ввод.

Заключение и Рекомендации

Использование useState — это основополагающий механизм в React для управления состоянием компонента. Важно помнить, что правильная структура компонентов и понимание механизма рендеринга могут существенно улучшить работу вашего приложения. Используйте хуки wisely и помните, что оптимизация вашего компонента может значительно повысить его отзывчивость и производительность.

В контексте SEO, убедитесь, что ваш код написан чисто и оптимизирован с точки зрения производительности. Это поможет поисковым системам легче индексировать ваше приложение и предоставлять пользователям более эффективный опыт взаимодействия.

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