21 лучшая практика для чистого проекта React
Что такое три точки (…) в Javascript
19.01.2022
Удивительные функции в React и React Router v6
20.01.2022
Практические советы по улучшению качества кода
На React вы должны сами структурировать проект. Именно поэтому ответственность лежит на нас за чистоту и ремонтопригодность наших проектов.
Сегодня рассмотрим о некоторых передовых методах, которым следует следовать, чтобы улучшить работоспособность вашего продукта на React. Данные правила используются большинством разработчиков, поэтому их нужно знать наизусть.
Примеры показаны с кодом, так что будет интересно!
1. Используйте JSX ShortHand
Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите контролировать видимость заголовка Navbarкомпонента.
Плохо
|
1 2 3 4 5 |
return ( <Navbar showTitle={true} /> ); |
Хорошо
|
1 2 3 4 5 |
return( <Navbar showTitle /> ) |
2. Используйте тернарные операторы
Допустим, вы хотите отобразить сведения о конкретном пользователе в зависимости от его роли.
Плохо
|
1 2 3 4 5 6 7 8 9 |
const { role } = user; if(role === ADMIN) { return <AdminUser /> }else{ return <NormalUser /> } |
Хорошо
|
1 2 3 4 5 |
const { role } = user; return role === ADMIN ? <AdminUser /> : <NormalUser /> |
3. Воспользуйтесь преимуществом литералов объектов
Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите показать три типа пользователей в зависимости от их роли. Вы не можете использовать тернарный, потому что количество опций больше двух.
Плохо
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const {role} = user switch(role){ case ADMIN: return <AdminUser /> case EMPLOYEE: return <EmployeeUser /> case USER: return <NormalUser /> } |
Хорошо
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const {role} = user const components = { ADMIN: AdminUser, EMPLOYEE: EmployeeUser, USER: NormalUser }; const Component = components[role]; return <Componenent />; |
Теперь это выглядит намного лучше.
4. Используйте фрагменты
Всегда используйте Fragment над Div. Это сохраняет код в чистоте, а также повышает производительность, поскольку в виртуальной DOM создается на один узел меньше.
Плохо
|
1 2 3 4 5 6 7 8 9 |
return ( <div> <Component1 /> <Component2 /> <Component3 /> </div> ) |
Хорошо
|
1 2 3 4 5 6 7 8 9 |
return ( <> <Component1 /> <Component2 /> <Component3 /> </> ) |
5. Не определяйте функцию внутри рендеринга
Не определяйте функцию внутри render. Постарайтесь свести логику внутри рендеринга к абсолютному минимуму.
Плохо
|
1 2 3 4 5 6 7 |
return ( <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE This is a bad example </button> ) |
Хорошо
|
1 2 3 4 5 6 7 8 9 |
const submitData = () => dispatch(ACTION_TO_SEND_DATA) return ( <button onClick={submitData}> This is a good example </button> ) |
6. Используйте памятку
React.PureComponentи Memoможет значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.
Плохо
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React, { useState } from "react"; export const TestMemo = () => { const [userName, setUserName] = useState("faisal"); const [count, setCount] = useState(0); const increment = () => setCount((count) => count + 1); return ( <> <ChildrenComponent userName={userName} /> <button onClick={increment}> Increment </button> </> ); }; const ChildrenComponent =({ userName }) => { console.log("rendered", userName); return <div> {userName} </div>; }; |
Хотя дочерний компонент должен отображаться только один раз, потому что значение count не имеет ничего общего с ChildComponent. Но он отображается каждый раз, когда вы нажимаете на кнопку.
Хорошо
Давайте отредактируем ChildrenComponentэто:
|
1 2 3 4 5 6 7 8 |
import React ,{useState} from "react"; const ChildrenComponent = React.memo(({userName}) => { console.log('rendered') return <div> {userName}</div> }) |
Теперь независимо от того, сколько раз вы нажмете на кнопку, она будет отображаться только тогда, когда это необходимо.
7. Поместите CSS в JavaScript
Старайтесь избегать необработанного JavaScript при написании приложений React, потому что организация CSS намного сложнее, чем организация JS.
Плохо
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// CSS FILE .body { height: 10px; } //JSX return <div className='body'> </div> |
Хорошо
|
1 2 3 4 5 6 7 8 9 |
const bodyStyle = { height: "10px" } return <div style={bodyStyle}> </div> |
8. Используйте деструктурирование объектов
Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.
Плохо
|
1 2 3 4 5 6 7 8 9 |
return ( <> <div> {user.name} </div> <div> {user.age} </div> <div> {user.profession} </div> </> ) |
Хорошо
|
1 2 3 4 5 6 7 8 9 10 11 |
const { name, age, profession } = user; return ( <> <div> {name} </div> <div> {age} </div> <div> {profession} </div> </> ) |
9. Строковые реквизиты не нуждаются в фигурных скобках
При передаче строковых реквизитов дочернему компоненту.
Плохо
|
1 2 3 4 5 |
return( <Navbar title={"My Special App"} /> ) |
Хорошо
|
1 2 3 4 5 |
return( <Navbar title="My Special App" /> ) |
10. Удаляйте код JS из JSX
Переместите любой код JS из JSX, если он не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.
Плохо
|
1 2 3 4 5 6 7 8 9 10 11 12 |
return ( <ul> {posts.map((post) => ( <li onClick={event => { console.log(event.target, 'clicked!'); // <- THIS IS BAD }} key={post.id}>{post.title} </li> ))} </ul> ); |
Хорошо
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const onClickHandler = (event) => { console.log(event.target, 'clicked!'); } return ( <ul> {posts.map((post) => ( <li onClick={onClickHandler} key={post.id}> {post.title} </li> ))} </ul> ); |
11. Используйте шаблонные литералы
Используйте литералы шаблонов для создания больших строк. Избегайте использования конкатенации строк. Это красиво и чисто.
Плохо
|
1 2 3 4 5 6 7 |
const userDetails = user.name + "'s profession is" + user.proffession return ( <div> {userDetails} </div> ) |
Хорошо
|
1 2 3 4 5 6 7 |
const userDetails = `${user.name}'s profession is ${user.proffession}` return ( <div> {userDetails} </div> ) |
12. Импортируйте по порядку
Всегда старайтесь импортировать вещи в определенном порядке. Это улучшает читаемость кода.
Плохо
|
1 2 3 4 5 6 7 |
import React from 'react'; import ErrorImg from '../../assets/images/error.png'; import styled from 'styled-components/native'; import colors from '../../styles/colors'; import { PropTypes } from 'prop-types'; |
Хорошо
Эмпирическое правило состоит в том, чтобы сохранить порядок импорта следующим образом:
- Встроенный
- Внешний
- Внутренний
Таким образом, приведенный выше пример становится:
|
1 2 3 4 5 6 7 8 9 |
import React from 'react'; import { PropTypes } from 'prop-types'; import styled from 'styled-components/native'; import ErrorImg from '../../assets/images/error.png'; import colors from '../../styles/colors'; |
13. Используйте неявный возврат
Используйте возможности неявного JavaScript returnдля написания красивого кода. Допустим, ваша функция выполняет простой расчет и возвращает результат.
Плохо
|
1 2 3 4 5 |
const add = (a, b) => { return a + b; } |
Хорошо
|
1 2 3 |
const add = (a, b) => a + b; |
14. Именование компонентов
Всегда используйте PascalCase для компонентов и camelCase для экземпляров.
Плохо
|
1 2 3 4 5 |
import reservationCard from './ReservationCard'; const ReservationItem = <ReservationCard />; |
Хорошо
|
1 2 3 4 5 |
import ReservationCard from './ReservationCard'; const reservationItem = <ReservationCard />; |
15. Зарезервированное имя реквизита
Не используйте имена свойств компонента DOM для передачи свойств между компонентами, потому что другие могут не не понимать этих имен.
Плохо
|
1 2 3 4 5 |
<MyComponent style="dark" /> <MyComponent className="dark" /> |
Хорошо
|
1 2 3 |
<MyComponent variant="fancy" /> |
16. Цитаты
Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.
Плохо
|
1 2 3 4 5 |
<Foo bar='bar' /> <Foo style={{ left: "20px" }} /> |
Хорошо
|
1 2 3 4 5 |
<Foo bar="bar" /> <Foo style={{ left: '20px' }} /> |
17. Именование реквизита
Всегда используйте camelCase для имён реквизитов или PascalCase, если значение реквизита является компонентом React.
Плохо
|
1 2 3 4 5 6 |
<Component UserName="hello" phone_number={12345678} /> |
Хорошо
|
1 2 3 4 5 6 7 |
<MyComponent userName="hello" phoneNumber={12345678} Component={SomeComponent} /> |
18. JSX в скобках
Если ваш компонент занимает более одной строки, всегда заключайте его в круглые скобки.
Плохо
|
1 2 3 4 5 |
return <MyComponent variant="long"> <MyChild /> </MyComponent>; |
Хорошо
|
1 2 3 4 5 6 7 |
return ( <MyComponent variant="long"> <MyChild /> </MyComponent> ); |
19. Самозакрывающиеся теги
Если у вашего компонента нет дочерних элементов, используйте самозакрывающиеся теги. Это улучшает читаемость.
Плохо
<SomeComponent variant=”stuff”></SomeComponent>
Хорошо
|
1 2 3 |
<SomeComponent variant="stuff" /> |
20. Подчеркивание в имени метода
Не используйте символы подчеркивания во внутренних методах React.
Плохо
|
1 2 3 4 5 |
const _onClickHandler = () => { // do stuff } |
Хорошо
|
1 2 3 4 5 |
const onClickHandler = () => { // do stuff } |
21. Альтернативная опора
Всегда включайте в <img >теги атрибут alt. И не используйте pictureили imageв своем свойстве alt, потому что программы чтения с экрана уже объявляют imgэлементы как изображения. Нет необходимости включать это.
Плохо
|
1 2 3 4 5 |
img src="hello.jpg" /> <img src="hello.jpg" alt="Picture of me rowing a boat" /> |
Хорошо
|
1 2 3 |
<img src="hello.jpg" alt="Me waving hello" /> |
Применяйте данные практики и у Вас все получится!
Источник статьи: https://medium.com/
