React — один из самых популярных интерфейсных фреймворков для языка JavaScript. В отличие от других фреймворков, таких как Angular, он не очень систематизирован. Поэтому вам решать, как вы хотите написать или структурировать свой код React.
Некоторые из передовых методов React, которым вы должны следовать, чтобы повысить производительность вашего приложения, перечислены ниже, чтобы вы могли воспользоваться ими. Проверять Как создать чат-приложение с помощью React и Firebase.
1. Используйте компоненты и хуки вместо классов
В React вы можете использовать классы или функциональные компоненты с хуками. Однако вам следует чаще использовать функциональные компоненты и хуки, потому что они дают более лаконичный и читаемый код по сравнению с классами.
Вот выдержка из блока класса, который отображает данные из NASA API.
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data…. </h1>{“ “}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
} Вы можете написать тот же компонент, используя хуки:
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{“ “}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}; Хотя приведенный выше код делает то же самое, что и компонент класса, он менее сложен, менее ограничен и прост для понимания.
2. Избегайте использования состояния (если возможно)
Состояние React отслеживает данные, изменение которых вызывает повторную визуализацию компонента React. При создании приложений React максимально избегайте использования состояния, потому что чем больше состояний вы используете, тем больше данных вы должны отслеживать в своем приложении.
Один из способов сократить использование состояния — объявлять его только при необходимости. Например, если вы извлекаете пользовательские данные из API, сохраняйте в состоянии весь пользовательский объект, а не отдельные свойства.
вместо следующего:
const [username, setusername] = useState(‘’) const [password, setpassword] = useState(‘’)
Вы можете сделать следующее:
const [user, setuser] = useState({}) 3. Организуйте файлы, относящиеся к одному и тому же компоненту, в одной папке.
При выборе структуры папок для вашего приложения React рассмотрите возможность использования структуры, ориентированной на компоненты. Это означает хранение всех файлов, связанных с одним компонентом, в одной папке.
Например, если вы создаете плагин Navbar, создайте папку с именем Navbar, содержащую файл плагина, таблицу стилей, файлы javascript и другие ресурсы, используемые в плагине.
Единая папка, содержащая все файлы компонентов, упрощает повторное использование, совместное использование и отладку. Если вам нужно посмотреть, как работает плагин, просто откройте одну папку и просмотрите ее содержимое.
Другие рекомендации по работе с папками React:
- Используйте индексные файлы, чтобы обобщить детали реализации вашего файла компонента. Глядя на пример Navbar, создайте папку Navbar и добавьте в эту папку файл компонента с именем index.js (или .ts).
- Храните повторно используемые компоненты в отдельной папке. Если у вас есть компоненты, которые используются более чем одной частью вашего приложения, подумайте о том, чтобы хранить их в именованной папке. Компоненты. Это поможет вам легко найти их.
- Храните функции утилиты в отдельной папке, например, в папке lib или в папке Assistants. Это облегчит управление и повторное использование этих функций позже.
4. Избегайте использования индексов в качестве основного реквизита
React использует ключи для уникальной идентификации элементов в массиве. С помощью ключей React может отметить, какой элемент был изменен, добавлен или удален из массива.
При рендеринге массивов вы можете использовать индекс в качестве ключа.
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
}; Хотя иногда это работает, использование индекса в качестве ключа может вызвать проблемы, особенно если ожидается, что список изменится. Рассмотрим этот список.
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
В настоящее время первый элемент списка «Элемент1» имеет нулевой индекс, но если вы добавите еще один элемент в начало списка, индекс «Элемент1» изменится на 1, что изменит поведение вашего массива.
Решение состоит в том, чтобы использовать уникальное значение в качестве индекса, чтобы гарантировать сохранение идентичности элемента списка.
5. По возможности выбирайте Div вместо Div
Компоненты React должны возвращать код, заключенный в один тег, обычно или Реакт. Вы должны выбрать части, где это возможно.
использовать свинец Это может увеличить размер DOM, особенно в больших проектах, потому что чем больше у вас тегов или узлов DOM, тем больше памяти требуется вашему веб-сайту, тем больше мощности браузер использует для загрузки веб-сайта. Это приводит к снижению скорости страницы и потенциально плохому взаимодействию с пользователем.
Один из примеров избавления от знаков Необязательно использовать его при возврате одного элемента.
const Button = () => {
return <button>Display</button>;
}; 6. Следуйте соглашениям об именах
Вы всегда должны использовать PascalCase (удалять пробелы и делать первую букву каждого слова заглавной) при именовании компонентов, чтобы отличать их от других файлов JSX, не являющихся компонентами. Например: TextField, NavMenu и SuccessButton.
Используйте CamelCase (пишите фразы без пробелов и знаков препинания, слова разделяются одной заглавной буквой) для функций, объявленных внутри компонентов React, таких как handleInput() или showElement().
7. Избегайте избыточного кода
Если вы заметили, что пишете избыточный код, преобразуйте его в повторно используемые компоненты.
Например, более целесообразно создать компонент для собственного навигационного меню, чем постоянно писать код в каждом компоненте, которому требуется меню.
В этом преимущество блочной архитектуры. Вы можете разбить свой проект на небольшие компоненты, которые вы можете повторно использовать в своем приложении. Проверять Как создать видеоплеер в React.
8. Используйте атрибуцию декомпозиции для получения реквизита
Вместо передачи объекта реквизита используйте назначение деконструкции объекта для передачи имени свойства. Это игнорирует необходимость обращаться к объекту реквизита каждый раз, когда вам нужно его использовать.
Например, ниже показан компонент, который использует свойства как есть.
const Button = (props) => {
return <button>{props.text}</button>;
}; С назначением декомпозиции объекта вы можете напрямую ссылаться на текст.
const Button = ({text}) => {
return <button>{text}</button>;
}; 9. Динамическое отображение массивов с помощью карты
Используйте map() для динамического отображения повторяющихся блоков HTML. Например, вы можете использовать map() для отображения списка элементов в тегах. .
const Items = () => {
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
}; Для сравнения, вот как отобразить список без map(). Этот подход очень повторяющийся.
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
}; 10. Напишите тесты для каждого компонента реакции
Напишите тесты для компонентов, которые вы создаете, потому что они уменьшают вероятность ошибок. Тестирование гарантирует, что компоненты ведут себя так, как вы ожидаете. Jest — одна из самых популярных сред тестирования в React, предоставляющая среду, в которой вы можете запускать свои тесты. Проверять Как создавать объекты перетаскивания в React.
React — мощный фреймворк, но вы должны следовать определенным правилам.
Хотя React очень гибок в том, как вы его используете, соблюдение определенных рекомендаций поможет вам получить максимальную отдачу от вашего опыта.
Следуя этим советам, помните о своем проекте и целях, потому что разные передовые практики React могут быть более актуальными в разных контекстах. Например, для проекта с небольшой командой и ограниченной областью действия может не потребоваться такой же уровень организации папок, как для большого проекта, в котором несколько групп работают вместе. Вы можете просмотреть сейчас Как внести свой вклад в проекты с открытым исходным кодом, будучи новичком.
