Перейти к содержанию

React

Обсуждаем React: JSX, Redux, React Hook Form, MobX, Custom Hooks, Хуки, Zustand, Vite, Webpack, MUI. Поделись опытом, задай вопросы и получи ответы от сообщества разработчиков React. Узнай, как создавать мощные и масштабируемые приложения с помощью React и его экосистемы.

10 Темы 15 Сообщения
  • Новые клиентские хуки в React 19

    2
    0 Голоса
    2 Сообщения
    27 Просмотры
    kirilljsK
    Продолжаю делиться своими находками из React 19, про три важных нововведения: работу с ref, метаданными и обработку ошибок. Эти изменения существенно упрощают разработку и делают код более чистым. Упрощённая передача ref Раньше, чтобы передать ref в компонент, нужно было оборачивать его в forwardRef. Это создавало дополнительный уровень сложности и увеличивало объём кода. В React 19 всё стало гораздо проще — теперь можно передавать ref как обычное свойство! Пример: function CustomButton({ ref }) { return <button ref={ref}>Нажми меня</button>; } // Использование: <CustomButton ref={myButtonRef} />; Теперь не нужно думать о том, как правильно обернуть компонент или следить за тем, чтобы ref был корректно передан. Код стал понятнее и короче. Особенно это полезно для небольших компонентов, где использование forwardRef раньше казалось избыточным. Поддержка метаданных Ещё одно долгожданное изменение — возможность напрямую управлять метатегами (<title>, <meta>, <link>) прямо внутри компонентов. Раньше для этого приходилось использовать сторонние библиотеки, такие как react-helmet. Теперь всё это доступно “из коробки”. Пример: function BlogPost({ post }) { return ( <article> <h1>{post.title}</h1> <title>{post.title}</title> <meta name="description" content={post.summary} /> <meta name="keywords" content={post.tags.join(', ')} /> <p>{post.content}</p> </article> ); } Это особенно удобно для управления SEO-данными. Например, если вы пишете блог или новостной сайт, теперь можно легко динамически обновлять заголовки и метатеги на основе данных, полученных от сервера. Плюс ко всему, это работает быстрее, чем через сторонние решения. Оптимизированная обработка ошибок Ошибки — это неизбежная часть разработки, но React 19 сделал их обработку намного удобнее. Теперь сообщения об ошибках стали более информативными и компактными. Система отображает только одно четкое сообщение, что помогает быстрее находить и исправлять проблемы. Например, раньше при возникновении ошибки могла появиться целая куча текста с трейсами, которые были трудно интерпретировать. Сейчас же вы видите только самое важное: Error: Cannot read properties of undefined (reading 'map') Component: BlogPost Location: src/components/BlogPost.js:25 Это значительно ускоряет процесс отладки, особенно в больших проектах, где раньше приходилось тратить время на анализ огромных логов. Личные впечатления Поработав с этими нововведениями, могу сказать, что они действительно делают жизнь разработчика проще. Вот что мне особенно понравилось: Упрощённая работа с ref: больше никаких лишних обёрток, всё просто и интуитивно. Метаданные: теперь можно забыть про react-helmet и подобные библиотеки. Всё необходимое есть в React. Обработка ошибок: более чёткие сообщения помогают быстрее находить проблемы, а это экономит кучу времени. Если у вас есть опыт использования этих фич или вопросы по ним — пишите в комментариях! Интересно узнать, как эти изменения повлияли на ваши проекты.
  • Each child in a list should have a unique "key" prop

    1
    0 Голоса
    1 Сообщения
    18 Просмотры
    Нет ответов
  • Cannot update a component while rendering a different component

    1
    0 Голоса
    1 Сообщения
    15 Просмотры
    Нет ответов
  • Шпаргалка по React 19

    1
    1
    2 Голоса
    1 Сообщения
    14 Просмотры
    Нет ответов
  • Оптимизация React js приложений. Использование функции debounde()

    5
    3 Голоса
    5 Сообщения
    82 Просмотры
    ManulM
    @kirilljs Возможно магия реакта onInput и onChange делает идентичными, https://github.com/facebook/react/issues/3964 Скорее всего можно использовать и то и то
  • Эта тема удалена!

    1
    0 Голоса
    1 Сообщения
    6 Просмотры
    Нет ответов
  • Cannot find name 'ChangeEvent'.ts(2304) type ChangeEvent = /*unresolved*/ any

    1
    1 Голоса
    1 Сообщения
    28 Просмотры
    Нет ответов
  • Как импортировать компонент react

    1
    0 Голоса
    1 Сообщения
    26 Просмотры
    Нет ответов
  • Как передать пропсы в компонент React

    1
    0 Голоса
    1 Сообщения
    34 Просмотры
    Нет ответов
  • React: Как создать компонент

    1
    0 Голоса
    1 Сообщения
    19 Просмотры
    Нет ответов