7 самых распространенных ошибок разработки, которые допускают начинающие в React

7 самых распространенных ошибок разработки, которые допускают начинающие в React

От автора: недавно мне пришлось вести семинар по React для разработчиков из компании, с которой я работаю. Некоторые из них были новичками, другие — опытными back-end разработчиками, но, к моему удивлению, выяснилось, что для обеих этих категории людей существуют некоторые общие шаблоны проблем, из-за которых усложняется React разработка. Итак, я решил составить список этих распространенных ошибок, надеясь, что это убережет вас в какой-то момент от разочарований, когда вы впервые приступите к изучению React.

1. Все, что происходит при изменении состояния, должно выполняться с помощью метода setState

Возможно, это старый вопрос, и для опытных разработчиков React это может быть очевидным, но это все еще одна из наиболее часто встречающихся проблем при работе с React. Поэтому никогда не пытайтесь делать что-то вроде этого:

this.state.someValue = 10

Это не сработает, представление не будет обновлено, а самое худшее — мы не получим никакого сообщения об ошибке в консоли, которое бы дало нам знать, что мы сделали что-то неправильно.

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

this.setState({someValue:10})

2. Метод setState является асинхронным

Говоря о состоянии — состояние в React асинхронно. Это означает, что если мы вызываем setState, у нас нет гарантии, что при выполнении следующей строки это изменение действительно будет иметь место. Об этом иногда забывают даже разработчики, которые используют React уже в течение некоторого времени.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Если мы попытаемся использовать setState несколько раз в одной и той же функции или блоке кода, мы можем столкнуться со странным поведением. Например, если у нас есть такой код в обработчике кликов:

doStuff = () => {
this.setState({ foo: this.state.foo + 1 });
 if (this.state.foo > 7) {
 this.setState({ bar: 20 });
 }
 }

Если вы используете этот код, вы увидите, что bar становится 20, только когда foo равно 9. Это результат асинхронного характера setState. Когда вычисляется оператор if, у setState не будет достаточно времени для внесения изменений. Поэтому, когда foo — 8, оператор if по-прежнему дает false.

Чтобы исправить это, давайте заглянем в документацию по setState. Мы обнаружим таинственную функцию обратного вызова, которая обеспечит тот факт, что какой-то код будет запущен только после того, как setState фактически внесет изменения. Итак, мы можем попробовать что-то вроде этого:

doStuff = () => {
 this.setState({ foo: this.state.foo + 1 }, () => {
 if (this.state.foo > 7) {
 this.setState({ bar: 20 });
 }
 });
};

И ниже вы можете увидеть предыдущий пример, но на этот раз в нем реализована функция обратного вызова.

3. Отправка свойства в виде строк вместо цифр

Если ранее вы писали большое количество чистого HTML-кода, вам может показаться естественным написать что-то вроде:

<MyComponent value="2" />

Тем не менее, это отправит значение свойства в MyComponent как String. Итак, если вам это нужно передать его в виде числа, нужно использовать что-то вроде parseInt. Или сделайте это способом React: используйте фигурные скобки при отправке:

<MyComponent value={2} />

Это также будет работать, если вам нужно отправить другие объекты javascript, такие как объекты или массивы:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В качестве альтернативы вы можете использовать props-types, чтобы определить, какой тип данных должно иметь свойство React. Обратите внимание, что тип свойства теперь имеет собственный пакет npm.

4. Использование не тех версий инструментов, которые используются в примере или руководстве.

Это не имело прямого отношения к семинару, но из той же категории. Недавно один читатель js-craft.io отправил мне электронное письмо, в котором написал, что он пытается следовать примеру React API, но по непонятным причинам получает исключения, даже если код точно такой же. Ну, оказалось, что он открыл более старый проект и попытался использовать React 1.6 Context API. Между тем, в его package.json версия React была ниже 1.6. Поэтому не забудьте проверить версии из package.json :) !

Следующие случаи также являются примерами того, что делают новички React (и время от времени мы все совершаем такие ошибки), но, к счастью, их легче выявить, поскольку они сопровождаются с сообщениями об ошибках или предупреждениями в консоли.

5. Использование class вместо className

В React, если вы хотите присвоить имя класса CSS компоненту, не пытайтесь сделать что-то вроде:

<h1 class="css-class-for-title”>Some title here</h1>

В React-JSX это будет выдавать ошибку, так как ключевое слово class принадлежит ES6. Вместо этого используйте className:

<h1 className="css-class-for-title”>Some title here</h1>

6. Не забывайте указывать имя компонента с большой буквы

Это понятно. Если вы напишете что-то вроде:

class myApp extends React.Component {
}

вы получите красноречивое сообщение об ошибке If you meant to render a React component, start its name with an uppercase letter. Итак, компоненты React начинаются только с большой буквы.

7. Попытка использовать объекты с фигурными скобками — дочерние элементы не принимаются в качестве объекта

Это происходит в основном при отладке. Если вы хотите выввести содержимое объекта в React, не ожидайте, что фигурные скобки в React будут работать аналогично стандарту console.log. Если вы попытаетесь использовать фигурные скобки с объектом, вы получите сообщение об ошибке:

render() { 
  let objToPrint = {
 name:"Bob", 
 age: 5 
  } 
  return (<div>{objToPrint}</div>); 
}

Если вам действительно нужно вывести содержимое этого объекта, перейдите на JSON.stringify:

render() { 
  let objToPrint = { 
 name:"Bob", 
 age: 5 
  } 
  return (<div>{JSON.stringify(objToPrint)}</div>); 
}

И в качестве заключения. Даже если это не существенная ошибка — попытайтесь разобрать и повторно использовать компонент. Когда вы впервые начинаете использовать React, легко сбиться на написание раздутых компонентов. Небольшие классы / модули / все, что легче понять, проверить и поддерживать, и то же самое касается компонентов React.

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

Источник: http://www.js-craft.io/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по React JS Material UI

Прямо сейчас посмотрите курс по React JS Material UI

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree