Чего нельзя делать и как их исправить, если вы это сделаете

Эта статья предназначена для разработчиков, которые совершенно не знакомы с React, и для начинающих разработчиков React. Давай начнем!

1. Забыть капитализировать компоненты React

Рассмотрим этот фрагмент кода. Он создает простой div с заголовком для родительского компонента. Внутри есть дочерний компонент, состоящий из div с некоторым текстом. Как вы думаете, что появится при запуске кода?

childComponent не был обработан. Куда это делось? Код успешно скомпилирован. В терминале тоже не было ошибки.

Еще раз взгляните на код дочернего компонента. Обратите внимание на название компонента. Вы замечаете что-то другое?

Откройте консоль в браузере. (CTRL + SHIFT + C в Windows | Command + Option + C в Mac | Щелкните правой кнопкой мыши - ›« Проверить ».)

Оказывается, React вместо этого рассматривает компоненты в нижнем регистре как теги DOM. Если вы новичок в React, возможно, вы пропустили эту крошечную деталь в документации React.

Не зная этого, новички нередко застревают здесь, гадая, что пошло не так, даже если их код скомпилирован без ошибок.

Исправить это просто. Используйте свои компоненты с большой буквы.

2. Неправильный вызов полученного реквизита

Чтобы получить доступ к реквизитам, которые были переданы родительским компонентом, дочерний компонент должен гарантировать, что они вызывают правильные имена свойств.

Свойства могут быть переданы в дочерние компоненты, используя другое имя переменной. Рассмотрим этот фрагмент кода:

Хотя этот код будет компилироваться и запускаться без ошибок, текст внутри ChildComponent отображаться не будет.

<ChildComponent mainText={randomString} />

Взгляните на эту строчку кода внимательнее. Переменная randomString, объявленная внутри ParentComponent, была передана в ChildComponent как свойство с именем mainText.

Однако ChildComponent пытается получить доступ к randomString из полученных реквизитов. Поскольку он получил только mainText как опору, это приведет к тому, что undefined будет назначен randomString, который был объявлен в ChildComponent. В результате внутри его тегов <p> ничего не отображается.

Обратите внимание на то, какие свойства были переданы вашим компонентам, и получите к ним доступ соответственно. Это избавит вас от лишней головной боли при отладке.

3. Передача неправильных типов реквизита.

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

Рассмотрим этот ChildComponent, который получает два реквизита: showIntro и showBody. Отображается "Привет!" и «Найдите ошибку!» , только если для showIntro и showBody установлено значение true соответственно.

ChildComponent ожидает, что в качестве свойств будут переданы два логических значения. Что произойдет, если вы сделаете что-то подобное в родительском компоненте?

<ChildComponent showIntro='false' showBody='false' />
<ChildComponent showIntro={'false'} showBody={'false'} />
<ChildComponent showIntro={false} showBody={false} />

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

Оба <p> тега отображаются для первых двух ChildComponent, но не для последнего ChildComponent.

Передача 'false' и {'false'} в качестве свойств приведет к тому, что showIntro и showBody будут непреднамеренно присвоены строке со значением false вместо логического false.

showIntro и showBody получили true за первые два ChildComponent.

Это происходит из-за неявного приведения типа оператором &&. Когда оператор && проверяет showIntro или showBody (обе строки), обе строки будут переведены в true.

Последний ChildComponent получил логическое false, поэтому ничего не отображал правильно.

console.log(`showIntro type: ${typeof showIntro}`);
console.log(`showIntro evaluated to: ${showIntro && true}`);
console.log(`showBody type: ${typeof showBody}`);
console.log(`showBody evaluated to: ${showBody && true}`);

Чтобы убедиться в этом, запустим console.log(), чтобы проверить, как оцениваются наши реквизиты в каждом ChildComponent.

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

Вы можете использовать кавычки для передачи строковых литералов.

<MyComponent data='Hello World!'/> // passing in a String

Фигурные скобки используются для передачи выражений JavaScript.

<MyComponent data={2468} /> // passing in a Number
<MyComponent data={true} /> // passing in a Boolean

Вот кое-что из React Docs, на что вы также должны обратить внимание:

«Не заключайте в кавычки фигурные скобки при встраивании выражения JavaScript в атрибут. Вы должны использовать кавычки (для строковых значений) или фигурные скобки (для выражений), но не оба сразу в одном атрибуте ».

4. Вызов setState () внутри render ()

Вы могли столкнуться с этой ошибкой, несмотря на то, что внутри вашего компонента не было componentWillUpdate() или componentWillUpdate(). Не волнуйтесь, эта ошибка возникает, когда вы вызываете setState() и внутри своей render() функции.

Почему это происходит? Каждый раз, когда вы вызываете setState(), React будет повторно выполнять рендеринг, вызывая render(). Что внутри вашей render() функции? setState().
Вы видите, к чему все идет? Бесконечный цикл.

Просто переместите вызов setState() за пределы функции render().

Если вам нужно инициализировать свое состояние (возможно, вы получаете данные из конечной точки API) после монтирования компонента, сделайте это внутри componentDidMount().

Если есть возможность инициализировать ваше состояние до монтирования компонента, вы также можете сделать это с помощью конструктора.

5. Асинхронный характер setState ()

Использование console.log() для распечатки значений - обычное дело при отладке. Однако это не очень хорошо работает, когда код выполняется асинхронно.

Вы пробовали делать что-то подобное раньше? Плохие новости - setState() вызовы асинхронны. Нет никакой гарантии, что данный код будет выполняться по порядку. Это может привести к таким результатам:

Два console.log() вызова, выполненные до выполнения setState(). Таким образом, он дважды печатает значение предыдущего состояния.

Если вы хотите проверить значение своего состояния до и после вызова setState(), передайте обратный вызов в качестве второго параметра внутри setState().

Обратный вызов будет выполнен после завершения setState(), что даст вам синхронное поведение для вашего console.log().

Заключение

Надеюсь, сегодня вы смогли узнать что-то новое. Кроме того, приветствуются все конструктивные отзывы о том, как я могу лучше проиллюстрировать / объяснить определенный момент!

Спасибо за прочтение!

P.s. это моя первая попытка написать техническую статью, дайте мне знать, если вы заметите какие-либо ошибки, которые я мог допустить!

использованная литература