Заметки про React

\n\nЧаще всего это различие не важно. Но если надо углубиться в HTML, то хорошо знать в чем разница. Основные различия:\n\n- Атрибуты сериализуются в HTML через свойство outerHTML.\n- Атрибуты всегда типа string, когда свойства могут быть любыми типами.\n- Атрибуты не чувствительны к регистру, тогда как свойства чувствительны к регистру.\n\nТакже стоит знать про рефлексию атрибутов и свойств. Например, в поле ввода input есть свойство input и атрибут input. Свойство инпут не рефлексирует атрибуту value. Вместо этого свойство defaultValue рефлексирует атрибуту value. Пример:\n\n\n\n\nПо мнению автора, это правильная логика. Атрибуты предназначены для настройки, тогда как свойства уже могут иметь состояние.\n\nhttps://jakearchibald.com/2024/attributes-vs-properties/","datePublished":"2024-04-30T10:30:43Z","dateModified":"2024-04-30T10:30:43Z","author":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"publisher":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2363},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/440","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/440","mainEntityOfPage":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/440","headline":"Как изменится API в React 19 Эндрю Кларк, один из разработчиков React, поделился как изменится API в React 19…","articleBody":"Как изменится API в React 19\n\nЭндрю Кларк, один из разработчиков React, поделился как изменится API в React 19. О чем он пишет:\n\n- Хуки useMemo, useCallback и мемоизация будут обрабатываться с помощью автоматической оптимизации React Compiler. \n\n- forwardRef станет устаревшим, поскольку ref станет пропом.\n\n- Вместо React.lazy импорта будут использоваться серверные компоненты.\n\n- Хук useContext будет заменен на хук use, который более гибкий и позволяет читать значения Promise и Context.\n\n- Context.Provider будет заменен более простой записью Context.\n\nhttps://thoughtbot.com/blog/get-your-codebase-ready-for-react-19","datePublished":"2024-04-26T10:20:05Z","dateModified":"2024-04-26T10:20:05Z","author":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"publisher":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2674},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":46}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/439","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/439","mainEntityOfPage":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/439","headline":"React 18.3 Команда React планирует минорный релиз React 18.3. В нем не будет никаких изменений в API, только…","articleBody":"React 18.3\n\nКоманда React планирует минорный релиз React 18.3. В нем не будет никаких изменений в API, только появятся новые предупреждения об устаревших функциях, чтобы помочь перейти на React 19. Например, React будет предупреждать, если будут использоваться строковые рефы, defaultProps вместе с FC/memo компонентами и при спреде пропа key в элемент.\n\nhttps://github.com/facebook/react/pull/28843","datePublished":"2024-04-24T10:10:10Z","dateModified":"2024-04-24T10:10:10Z","author":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"publisher":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2368},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/438","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/438","mainEntityOfPage":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/438","headline":"Next.js 14.2 Вышел релиз Next.js 14.2. Что нового: - Улучшение производительности локальной разработки с Turb…","articleBody":"Next.js 14.2\n\nВышел релиз Next.js 14.2. Что нового:\n\n- Улучшение производительности локальной разработки с Turbopack. Интегрировали Lightning CSS – быстрый CSS бандл и минификатор, написанный на Rust. Пока еще Turbopack нельзя использовать для прод сборки.\n\n- Оптимизация сборки:\n* Улучшен Tree-shaking. Например, импорт одной иконки из файла с \"use client\" больше не включает в бандл все остальные иконки. \n* Уменьшено потребление памяти для прод сборки. \n* Улучшена сборка CSS для предотвращения конфликтов стилей.\n\n- Появилась возможность изменить время жизни кэша страницы. \n\n- Улучшен DX ошибок. Например, при ошибке гидратации сообщается, где и как отличается разметка. \n\n- Поддержка новых фич из React 19, например Server Action и связанные с ним хуки. \n\nhttps://nextjs.org/blog/next-14-2","datePublished":"2024-04-22T10:15:08Z","dateModified":"2024-04-22T10:15:08Z","author":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"publisher":{"@type":"Organization","name":"Заметки про React","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes","image":"https://img.tlmtr.io/c/1iX4tw/5442745934208415613?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2633},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/437","url":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/437","mainEntityOfPage":"https://telemetr.io/ch/channels/1196185438-ru_react_notes/posts/437","headline":"CSS в React Server Components В блоге Джошуа Комо вышла статья про использование CSS-in-JS библиотек в React…","articleBody":"CSS в React Server Components\n\nВ блоге Джошуа Комо вышла статья про использование CSS-in-JS библиотек в React Server Components. Если вы используете CSS-in-JS библиотеки, то эта статья даст вам полезную информацию о том, какие есть варианты использования в RSC. Если не используете CSS-in-JS библиотеки, то сможете лучше разобраться как устроен RSC.\n\nВ отличие от клиентских компонентов, RSC выполняется только на сервере. RSC это как PHP шаблоны, которые рендерятся на сервере и возвращают HTML. RSC не поддерживают хуки, из-за того что они вызывают ре-рендеры, а RSC рендерится только один раз на сервере. \n\nCSS-in-JS библиотеки, которые выполняются в runtime, используют контекст и динамически генерируют стили компонентов, помещая их в тег