Share This
Связаться со мной
Крути в низ
Categories
//21 хорошая практика для очень хороших React проектов

21 хорошая практика для очень хороших React проектов

Несколько практических советов для улучшения качества кода. Обсудить

21 horoshaja praktika dlja ochen horoshih react proektov 79d028f - 21 хорошая практика для очень хороших React проектов

Статья публикуется в переводе, автор оригинального текста Мохаммад Фейсал.

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

Сегодня поговорим о том, как это сделать, – о самых полезных практиках разработки на React.

1. Используйте JSX-сокращения

Использовать логические значения никогда не было так просто. Допустим, вам нужно управлять видимостью компонента Navbar – с помощью пропса showTitle:

Плохо

         return (   <Navbar showTitle={true} /> );     

Хорошо

         return(   <Navbar showTitle />   )     

2. Используйте тернарные операторы

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

Плохо

         const { role } = user;  if(role === ADMIN) {   return <AdminUser /> }else{   return <NormalUser /> }     

Хорошо

         const { role } = user;  return role === ADMIN ? <AdminUser /> : <NormalUser />     

3. Используйте преимущества объектных литералов

Если у вас выбор между тремя и более компонентами, тернарный оператор не подходит. В этом случае литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.

Плохо

         const {role} = user  switch(role){   case ADMIN:     return <AdminUser />   case EMPLOYEE:     return <EmployeeUser />   case USER:     return <NormalUser /> }     

Хорошо

         const {role} = user  const components = {   ADMIN: AdminUser,   EMPLOYEE: EmployeeUser,   USER: NormalUser };  const Component = components[role];  return <Component />;     

4. Используйте фрагменты

Нет никакого преимущества в использовании div вместо Fragment. Зачем вам нужен лишний элемент в виртуальном DOM?

Плохо

         return (   <div>      <Component1 />      <Component2 />      <Component3 />   </div>   )     

Хорошо

         return (   <>      <Component1 />      <Component2 />      <Component3 />   </>   )     

5. Не определяйте функцию внутри рендера

Старайтесь не смешивать логику и рендер внутри компонента.

Плохо

         return (     <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE       This is a bad example      </button>   )     

Хорошо

         const submitData = () => dispatch(ACTION_TO_SEND_DATA)  return (   <button onClick={submitData}>       This is a good example    </button>   )     

6. Используйте Memo

React.PureComponent и Memo могут значительно повысить производительность вашего приложения, позволяя избежать ненужного рендеринга.

Плохо

         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 не имеет к нему никакого отношения. И тем не менее он рендерится при каждом нажатии на кнопку.

https://miro.medium.com/max/700/1*UC19Qvfj06VAy63lR8mOFg.png

Хорошо

Отредактируем немного ChildrenComponent:

         import React ,{useState} from "react";  const ChildrenComponent = React.memo(({userName}) => {     console.log('rendered')     return <div> {userName}</div> })     

Теперь не имеет значения, сколько раз пользователь кликнет на кнопку, компонент отрендерится только при необходимости.

7. Перенесите CSS в JavaScript

Организовать CSS сложнее, чем JavaScript, но можно постараться.

Плохо

         // CSS файл  .body {   height: 10px; }  // JSX  return <div className='body'>     </div>     

Хорошо

         const bodyStyle = {   height: "10px" }  return <div style={bodyStyle}>  </div>     

8. Используйте деструктуризацию объектов

Одна из новейших возможностей JS сделает ваш код более читаемым.

Плохо

         return (   <>     <div> {user.name} </div>     <div> {user.age} </div>     <div> {user.profession} </div>   </>   )     

Хорошо

         const { name, age, profession } = user;  return (   <>     <div> {name} </div>     <div> {age} </div>     <div> {profession} </div>   </>   )     

9. Строковые пропсы без фигурных скобок

Передать строковые данные проще, чем вы думаете.

Плохо

         return(   <Navbar title={"My Special App"} /> )      

Хорошо

         return(   <Navbar title="My Special App" />   )      

10. Удалите JS из JSX

Уберите весь код JavaScript из JSX-разметки, если он не служит какой-либо цели рендеринга или функциональности UI.

Плохо

         return (   <ul>     {posts.map((post) => (       <li onClick={event => {         console.log(event.target, 'clicked!'); // <- THIS IS BAD         }} key={post.id}>{post.title}       </li>     ))}   </ul> );     

Хорошо

         const onClickHandler = (event) => {    console.log(event.target, 'clicked!');  }  return (   <ul>     {posts.map((post) => (       <li onClick={onClickHandler} key={post.id}> {post.title} </li>     ))}   </ul> );      

11. Строковые литералы

Используйте строковые литералы вместо громоздкой конкатенации строк.

Плохо

         const userDetails = user.name + "'s profession is" + user.proffession  return (   <div> {userDetails} </div>   )      

Хорошо

         const userDetails = `${user.name}'s profession is ${user.proffession}`  return (   <div> {userDetails} </div>   )      

12. Порядок импортов

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

Плохо

         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. сначала встроенные (build-in) модули;
  2. затем внешние;
  3. и наконец внутренние.
         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. Используйте неявный return

Неявный возврат делает ваши функции изящнее. Но не злоупотребляйте этой фичей, она уместна только в простых функциях.

Плохо

         const add = (a, b) => {   return a + b; }      

Хорошо

         const add = (a, b) => a + b;     

14. Именование компонентов

Всегда используйте PascalCase для имен компонентов и camelCase – для экземпляров.

Плохо

         import reservationCard from './ReservationCard';  const ReservationItem = <ReservationCard />;      

Хорошо

         import ReservationCard from './ReservationCard';  const reservationItem = <ReservationCard />;     

15. Зарезервированные имена свойств

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

Плохо

         <MyComponent style="dark" />  <MyComponent className="dark" />     

Хорошо

         <MyComponent variant="fancy" />     

16. Кавычки

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

Плохо

         <Foo bar='bar' />  <Foo style={{ left: "20px" }} />     

Хорошо

         <Foo bar="bar" />  <Foo style={{ left: '20px' }} />     

17. Именование пропсов

Всегда используйте camelCase для имен пропсов или PascalCase, если значение атрибута – это другой React-компонент.

Плохо

         <Component   UserName="hello"   phone_number={12345678} />      

Хорошо

         <MyComponent   userName="hello"   phoneNumber={12345678}   Component={SomeComponent} />      

18. JSX в скобках

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

Плохо

         return <MyComponent variant="long">            <MyChild />          </MyComponent>;      

Хорошо

         return (     <MyComponent variant="long">       <MyChild />     </MyComponent> );      

19. Самозакрывающиеся теги

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

Плохо

         <SomeComponent variant="stuff"></SomeComponent>     

Хорошо

         <SomeComponent variant="stuff" />     

20. Подчеркивание в именах методов

Не используйте подчеркивание в любых внутренних методах.

Плохо

         const _onClickHandler = () => {   // do stuff }      

Хорошо

         const onClickHandler = () => {   // do stuff }      

21. Атрибут alt

Всегда устанавливайте атрибут alt для теги img и не используйте в нем слова image и picture. Альтернативный текст предназначен для скринридеров, которые и так объявляют элемент как изображение, зачем повторяться?

Плохо

         <img src="hello.jpg" />  <img src="hello.jpg" alt="Picture of me rowing a boat" />     

Хорошо

         <img src="hello.jpg" alt="Me waving hello" />     

Заключение

Вот и все. Поздравляем, если вы зашли так далеко! Надеюсь, вы кое-что узнали из этой статьи.

  • 8 views
  • 0 Comment

Leave a Reply

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Связаться со мной
Close