От автора: недавно мне пришлось вести семинар по 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.
