{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2018/10/23/react-v-16-6.html","result":{"data":{"markdownRemark":{"html":"

Сегодня мы выпускаем React 16.6 с несколькими новыми удобными возможностями: версию PureComponent/shouldComponentUpdate для функциональных компонентов, способ разделения кода при помощи Suspense и упрощённый доступ к контексту из классовых компонентов.

\n

Полный список изменений описан далее в посте.

\n

React.memo

\n

Классовые компоненты при помощи PureComponent или shouldComponentUpdate могут останавливать рендеринг, если пропсы не изменились. Теперь это доступно и в функциональных компонентах, если обернуть их в React.memo.

\n
const MyComponent = React.memo(function MyComponent(props) {\n  /* повторный рендер пройдёт только при изменении пропсов */\n});
\n

React.lazy: разделение кода при помощи Suspense

\n

Возможно, вы уже видели доклад Дэна о React Suspense(задержке) на JSConf Iceland. Теперь можно использовать компонент Suspense для разделения кода — нужно просто обернуть динамический импорт в React.lazy().

\n
import React, {lazy, Suspense} from 'react';\nconst OtherComponent = lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={<div>Загрузка...</div>}>\n      <OtherComponent />\n    </Suspense>\n  );\n}
\n

Компонент Suspense также даст возможность авторам библиотек в дальнейшем реализовать подгрузку данных с задержкой.

\n
\n

Примечание: эта функциональность пока не доступна для серверного рендеринга. Задержка будет добавлена в будущих релизах.

\n
\n

static contextType

\n

В React 16.3 мы представили официальный API для контекста, который заменит устаревший.

\n
const MyContext = React.createContext();
\n

Мы учли отзывы про сложности использования нового API рендер-пропсов в классовых компонентах. Поэтому добавили удобный API для получения значений контекста из классовых компонентов.

\n
class MyClass extends React.Component {\n  static contextType = MyContext;\n  componentDidMount() {\n    let value = this.context;\n    /* выполнить побочный эффект при монтировании, взяв значение из MyContext */\n  }\n  componentDidUpdate() {\n    let value = this.context;\n    /* ... */\n  }\n  componentWillUnmount() {\n    let value = this.context;\n    /* ... */\n  }\n  render() {\n    let value = this.context;\n    /* отрендерить что-нибудь, основываясь на значении из контекста */\n  }\n}
\n

static getDerivedStateFromError()

\n

React 16 впервые представил предохранители — механизм обработки ошибок, выброшенных при рендере. У нас уже есть метод жизненного цикла, вызываемый после возникновения ошибок, — componentDidCatch — он отлично подходит для отправки логов ошибок на сервер. Плюс к этому, с его помощью можно вызвать setState и показать другой UI.

\n

До вызова этого метода мы рендерим null в точке дерева, где произошла ошибка. Иногда родительские компоненты бывают не готовы к исчезновению рефов на дочерние компоненты и ломаются. Восстановиться после ошибки на сервере также нельзя, потому что Did-методы жизненного цикла при серверном рендере не вызываются.

\n

Мы добавили новый метод для рендера запасного UI до момента, пока не завершится полный рендер. Подробнее о getDerivedStateFromError() вы можете почитать в документации.

\n
\n

Примечание: getDerivedStateFromError() пока что не работает в серверном рендере. Мы выпустили его в таком сыром виде, чтобы вы пораньше с ним освоились и подготовились к релизу, в котором метод заработает и на сервере.

\n
\n

Устаревшие API в StrictMode

\n

В версии 16.3 мы представили компонент StrictMode, который позволяет выводить предупреждения, если в коде используются конструкции, которые в будущем могут вызвать проблемы.

\n

Мы добавили ещё два API в список устаревших API StrictMode. Не беспокойтесь: если вы не используете StrictMode, эти предупреждения у вас не появятся.

\n\n

Если у вас возникнут трудности с обновлением, пожалуйста, дайте нам знать.

\n

Установка

\n

React v16.6.0 уже доступен в реестре npm.

\n

Чтобы установить React 16 при помощи yarn, запустите:

\n
yarn add react@^16.6.0 react-dom@^16.6.0
\n

Чтобы установить React 16 при помощи npm, запустите:

\n
npm install --save react@^16.6.0 react-dom@^16.6.0
\n

Также мы даём возможность скачивать UMD-сборки React через CDN:

\n
<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>
\n

Подробнее об установке вы можете узнать в документации.

\n

Список изменений

\n

React

\n\n

React DOM

\n\n

React DOM Server

\n\n

Планировщик (экспериментально)

\n","excerpt":"Сегодня мы выпускаем React 16.6 с несколькими новыми удобными возможностями: версию PureComponent/shouldComponentUpdate для функциональных компонентов, способ разделения кода при помощи Suspense и упрощённый доступ к контексту из классовых компонентов. Полный список изменений описан далее в посте. Классовые компоненты при помощи или могут останавливать рендеринг, если пропсы не изменились. Теперь это доступно и в функциональных компонентах, если обернуть их в . : разделение кода при помощи…","frontmatter":{"title":"React v16.6.0: lazy, memo и contextType","next":null,"prev":null,"author":[{"frontmatter":{"name":"Sebastian Markbåge","url":"https://twitter.com/sebmarkbage"}}]},"fields":{"date":"23 октября, 2018","path":"content/blog/2018-10-23-react-v-16-6.md","slug":"/blog/2018/10/23/react-v-16-6.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"А React уже переведён? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2018/10/23/react-v-16-6.html"}},"staticQueryHashes":[]}