React има много различни начини да се използва сред разработчиците. Може да няма консенсус за това как трябва да изглежда или да се прилага като цяло, защото всеки има свое собствено предаване.
Други автори на среда за програмиране може да ви кажат да кодирате това, а не онова. Това не е моят начин. Ще ви дам инструментите, но в крайна сметка вие сте този, който рисува картината.
Ето моите 10 React AntiPatterns, които трябва да избягвате/прилагате, когато кодирате в ReactJS. Това са съвети за полезни случаи на използване на React, както и реализации, които да избягвате. Без допълнително забавяне, нека се включим.
#1 — Започнете с един голям компонент
Първият ми съвет започва, като се уверя, че не оптимизираме прекалено много нашия React код. Това означава, че ние не правим компоненти наляво и надясно. Ние правим само това, което е необходимо. За да направите това, препоръчвам ви да започнете, като изградите вашето приложение React наведнъж в основния си компонент App.js, така:
След като продължите напред и изградите цялото приложение, ще можете ясно да видите какви части от код трябва да бъдат извлечени в неговия собствен компонент, какво се повтаря, какво може да използва подпори и т.н.
За да извлечете част от код в неговия собствен компонент, използвайте разширението VS Code, наречено Glean:
#2 — Вложени компоненти
Самият аз съм правил тази грешка толкова много пъти, защото ми се струва толкова интуитивно. Типичната ситуация е, че влагате дъщерен компонент в родителски компонент. Погледни:
В тази ситуация, всеки път, когато вашият родител се рендира, той ще рендира и компонента Child, който създава нов адрес на паметта. Това може да доведе до проблеми с производителността надолу по линията, което е главоболие за разрешаване по-късно.
Решението е просто да включите вашия компонент Child извън компонента Parent и да го изобразите вътре в компонента Parent, като използвате подпори като така:
#3 — Съхранявайте всеки компонент в неговата категорийна директория
За целите на организацията и лесната употреба бих препоръчал да съхранявате всеки компонент в собствена директория, която е категоризирана от самия компонент. Например, ще имате директория Navbar, която съхранява файла Navbar.js, всички изображения, свързани с Navbar, CSS, шрифт и т.н. Това ще изглежда по следния начин:
Ето как организирам файловете си:
#4 — Избягвайте безсмислените наклонения
Често пъти, за да съществуват родителски елементи във функция, трябва да ги съхраните в Div. С React имате възможност да използвате ‹React.Fragment›, за да замените изцяло Div.
Задължително правило в React е, че вашият JSX трябва да има един родителски елемент. Има някои „добри причини за това“, но за краткост няма да се занимаваме с тях в тази статия.
И така, тук се намесват фрагментите. Фрагментите ви позволяват да създадете родителски елемент, без всъщност да създавате допълнителен излишен възел в DOM.
Това е!
