Содержание статьи
от Harsh Makadia
Подобно тому, как люди интересуются обновлением своих мобильных приложений и ОС, разработчики также должны быть в восторге от обновления своих фреймворков. Новая версия различных фреймворков поставляется с новыми функциями и уловками из коробки.
Ниже приведены некоторые из хороших функций, которые вы должны учитывать при миграции существующей программы на React 16 из React 15.
Пора попрощаться с React15?
Обработка ошибок
React 16 представляет новую концепцию an предел ошибки.
Пределы ошибок – это компоненты React, которые ловить ошибки JavaScript в любом месте их дочернего дерева компонентов. Они регистрируют эти ошибки и отображают пользовательский интерфейс пользователя вместо разбитого дерева компонентов. Пределы ошибок вылавливают ошибки при визуализации, в методах жизненного цикла и в конструкторах всего дерева под ними.
Компонент класса становится пределом ошибки, если он определяет новый метод жизненного цикла componentDidCatch(error, info):
Тогда вы можете использовать его в качестве обычного компонента.
<ErrorBoundary> <MyWidget /></ErrorBoundary>The componentDidCatch() метод работает как JavaScript catch {} блока, но для компонентов. Только компоненты класса могут быть пределами ошибок. На практике в большинстве случаев вам нужно один раз объявить компонент предела ошибки. Тогда вы будете использовать его во всей своей программе.
Заметьте, что пределы ошибок вылавливают ошибки только в компонентах под ними в дереве. Предел ошибки не может уловить ошибку внутри себя. Если границы ошибки не удается отобразить сообщение об ошибке, ошибка распространится до ближайшего предела ошибки над ней. Это тоже похоже на то, как catch {} блок работает в JavaScript.
Просмотрите демонстрацию в прямом эфире:
Чтобы узнать больше об обработке ошибок, перейдите сюда.
Новые типы возврата: фрагменты и строки
Избавьтесь от обертывания компонента в div во время визуализации.
Теперь вы можете возвращать массив элементов из компонента render метод. Как и в других массивах, вам нужно будет добавить ключ к каждому элементу во избежание предупреждения о ключе:
render() { // No need to wrap list items in an extra element! return [ // Don't forget the keys :) <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li>, ];}Начиная с React 16.2.0, он поддерживает специальный синтаксис фрагментов для JSX, не требующий ключей.
Поддержка возврата строк:
render() { return 'Look ma, no spans!';}Порталы
Порталы обеспечивают первоклассный способ воспроизведения детей в узел DOM, существующий вне иерархии DOM родительского компонента.
ReactDOM.createPortal(child, container)Первый аргумент (child) является любым дочерним элементом React, который можно воспроизвести, таким как элемент, строка или фрагмент. Второй аргумент (container) является элементом DOM.
Как это использовать
Когда вы возвращаете элемент из метода визуализации компонента, он монтируется в DOM как дочерний к ближайшему родительскому узлу:
render() { // React mounts a new div and renders the children into it return ( <div> {this.props.children} </div> );}Иногда полезно вставить ребенка в другое место в DOM:
render() { // React does *not* create a new div. It renders the children into `domNode`. // `domNode` is any valid DOM node, regardless of its location in the DOM. return ReactDOM.createPortal( this.props.children, domNode );}Типичный случай использования порталов – это когда родительский компонент имеет файл overflow: hidden или z-index стиль, но нужно, чтобы ребенок зрительно «вырвался» из своего контейнера. К примеру, диалоговые окна, подсказки и подсказки.
Специальный атрибут DOM
React15 игнорировал какие-либо неизвестные атрибуты DOM. Он просто пропустил бы их, поскольку React этого не распознает.
// Your code:<div mycustomattribute="something" />Отображать пустой div в DOM с помощью React 15:
// React 15 output:<div />У React16 выход будет таким (пользовательские атрибуты будут отображаться и вообще не игнорироваться):
// React 16 output:<div mycustomattribute="something" />Избегайте повторной визуализации с установкой NULL в состоянии
С помощью React16 вы можете предотвратить обновление состояния и повторную визуализацию прямо из setState(). Вам просто нужно вернуть вашу функцию null.
const MAX_PIZZAS = 20;function addAnotherPizza(state, props) { // Stop updates and re-renders if I've had enough pizzas. if (state.pizza === MAX_PIZZAS) { return null; } // If not, keep the pizzas coming! :D return { pizza: state.pizza + 1, }}this.setState(addAnotherPizza);Детальнее читайте здесь.
Создание ссылок
Теперь создавать ссылку с помощью React16 стало гораздо проще. Почему нужно использовать ссылку:
- Управление фокусом, выделением текста или воспроизведением медиа.
- Запуск императивной анимации.
- Интеграция с посторонними библиотеками DOM.
Ссылки создаются с помощью React.createRef() и присоединяются к элементам React с помощью refатрибут. Ссылки обычно назначаются свойству экземпляра, когда компонент создается, чтобы на них можно было ссылаться по всему компоненту.
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; }}Доступ к Ref
Когда ссылка передается элементу в renderссылка на узел становится доступной в current атрибут реф.
const node = this.myRef.current;Значение ref зависит от типа узла:
- Когда
refатрибут используется в элементе HTML, therefсозданный в конструкторе withReact.createRef()получает основной элемент DOM как егоcurrentсобственность. - Когда
refатрибут используется для специального компонента класса, therefобъект получает смонтированный экземпляр компонента как егоcurrent. - Вы не можете использовать
refатрибут на функциональные компоненты потому что у них нет экземпляров.
Контекстный API
Контекст обеспечивает способ передачи данных через дерево компонент без необходимости передавать реквизиты вручную на каждом уровне.
React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);Создает а { Provider, Consumer } пора. Когда React воспроизводит контекст Consumerон прочтет текущее значение контекста из ближайшего соответствия Provider над ним на дереве.
The defaultValue аргумент есть только используется Потребителем, если над ним нет в дереве соответствующего поставщика. Это может быть полезно для тестирования компонентов изолировано без их обертывания. Примечание: прохождение undefined как значение Provider не заставляет потребителей использовать defaultValue.
Provider
<Provider value={/* some value */}>Компонент React, позволяющий потребителям подписаться на изменения контекста.
Принимает а value prop для передачи Потребителям, являющимся потомками этого Поставщика. Один поставщик может быть подключен ко многим потребителям. Поставщики могут быть вложены, чтобы заменить значение поглубже в дереве.
Consumer
<Consumer> {value => /* render something based on the context value */}</Consumer>Компонент React подписывается на изменения контекста.
Нужна функция как ребенок. Функция получает текущее значение контекста и возвращает узел React. The value Аргумент, переданный в функцию, будет равен value опора ближайшего поставщика для этого контекста выше в дереве. Если для этого контекста нет поставщика, файл value аргумент будет равен defaultValue что было передано в createContext().
static getDerivedStateFromProps()
getDerivedStateFromProps вызывается непосредственно перед вызовом метода render. Как при начальной монтировке, так и при последующих обновлениях. Он должен вернуть объект, чтобы обновить состояние, или null, чтобы ничего не обновлять.
Этот метод существует для редких случаев использования, когда состояние зависит от изменений реквизитов с течением времени. К примеру, это может быть удобно для реализации a <Transitiкомпонент on>, сравнивающий предыдущие и последующие дочерние элементы, чтобы решить, какие из них анимировать и выводить.
Вывод состояния приводит к многословному коду и затрудняет размышления о компонентах.
Убедитесь, что вы знакомы с более простыми альтернативами:
Этот метод не имеет доступа к экземпляру компонента. Если хотите, вы можете повторно использовать некоторый код между ними getDerivedStateFromProps() и другие методы класса путем извлечения чистых функций компонента props и state за пределы определения класса.
Обратите внимание, что этот метод запущен каждый отразить, независимо от причины. Это в отличие от UNSAFE_componentWillReceiveProps. Он срабатывает только тогда, когда родительский элемент вызывает повторную визуализацию, а не в результате локального setState.
Сравним nextProps.someValue с this.props.someValue. Если оба разные, мы выполняем какую-то операцию, setState
static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.someValue!==prevState.someValue){ return { someState: nextProps.someValue}; } else return null;}Он получает два параметра nextProps и prevState. Как упоминалось ранее, вы не можете получить доступ this внутри этого способа. Вам придется хранить реквизит в состоянии, чтобы сравнить nextProps с предварительным реквизитом. В коде выше nextProps и prevState сравниваются. Если оба разные, то для обновления состояния будет возвращен объект. Иначе null будет возвращено, что указывает, что обновление состояния не требуется. Если состояние изменится тогда componentDidUpdate называется местом, где мы можем выполнять нужные операции, как это делали в componentWillReceiveProps.
Бонус: события жизненного цикла React
Кредиты жизненного цикла — https://twitter.com/dceddia
Вот некоторые из функций, которые вы обязательно должны попробовать при работе с React16!
Счастливого кодирования? ?