В чем разница между useSelect и useEntityProp?

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

 const slug = useSelect(
        ( select ) => select( 'core/editor' ).getEditedPostSlug()
    );

const [ meta, setMeta ] = useEntityProp( 'postType', 'kea_activity', 'meta' ); 

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

Разобраться в различиях между хуками useSelect и useEntityProp в контексте разработки с использованием библиотеки WordPress (и, в частности, Gutenberg) — задача важная, так как правильное их применение может значительно улучшить структуру и производительность вашего приложения.

Что такое useSelect?

Хук useSelect обеспечивает доступ к данным из глобального состояния (store) и позволяет компонентам автоматически подписываться на изменения этих данных. Например, в вашем коде:

const slug = useSelect(
    ( select ) => select( 'core/editor' ).getEditedPostSlug()
);

Этот код выполняет следующие функции:

• Вызывает метод select, который обращается к store с идентификатором 'core/editor'.
• Получает значение слайга (slug) текущего редактируемого поста через метод getEditedPostSlug().
• Автоматически подписывается на изменения данных: если slug изменится, компонент, использующий этот хук, перерисуется.

Таким образом, при помощи useSelect вы можете извлекать данные непосредственно из состояния store и гарантировать обновление компонента при изменении этих данных.

Что такое useEntityProp?

useEntityProp, с другой стороны, более специализированный хук, предназначенный для работы с сущностями WordPress, такими как посты, страницы или пользовательские таксономии. Он возвращает как значение, так и функцию для его обновления.

Пример использования:

const [ meta, setMeta ] = useEntityProp( 'postType', 'kea_activity', 'meta' );

Здесь происходит следующее:

• Хук useEntityProp получает данные (в данном случае, метаданные) для определенной сущности (postType: 'kea_activity') и свойства (meta).
• Возвращает массив, где первый элемент — это текущее значение, а второй — функция для его обновления.

Различия и взаимодействие

1. Целевая направленность:

   • useSelect используется для получения данных из глобального состояния и подписки на их изменения.
   • useEntityProp работает с конкретными сущностями, позволяя вам легко манипулировать их свойствами.

2. Структура данных:

   • useSelect может обращаться к различным частям состояния (полями конкретных store).
   • useEntityProp фокусируется на свойствах индивидуальной сущности, что делает его более удобным в контексте работы с постами и их метаданными.

3. Обновление компонента:

   • В случае useSelect, компонент перерисовывается при изменении данных, к которым идет обращение.
   • При использовании useEntityProp, перерисовка компонента происходит, когда происходит изменение любого из свойств сущности, на которую компонент подписан. При этом, обновление с помощью setMeta активирует изменение, которое отслеживается системой, и вызывает перерисовку компонента.

Что за "что-то", которое слушает обновления?

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

Заключение

Понимание различий между useSelect и useEntityProp помогает разработчикам оптимально организовывать работу с данными в WordPress. Используя их в соответствующих контекстах, можно добиться большей эффективности и улучшить пользовательский опыт. Если у вас остались вопросы или требуется дополнительная информация, не стесняйтесь обращаться.