Лайфхаки при изучении React

24 октября 2023

Академия разработки MediaSoft

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

  • Необходимо ознакомиться с синтаксисом, ещё лучше написать несколько классовых компонент

Классовые компоненты лучше показывают принцип работы жизненного цикла компоненты, чем функциональные. Также можно почитать про большое количество важных конструкций JS, таких как class, extend, super, constructor и прочее. 

class ClassComponent extends Component {
	constructor(props: Props) {
		super(props);
	}

	render() {
	return <Some></Some>;
	}
}

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

 

  • Разбивайте хуки на несколько, чтобы повысить читаемость кода

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

function App({ fetchValue, fetchSomeData }) {
useEffect(() -> {
	// Решает одну задачу, например, получение данных
	fetchSomeData(fetchValue);

	// Только те зависимости, которые нужны для задачи этого useEffect-а
}, [fetchSomeData, fetchValue]);

return <div className="App"></div>;
}

Так увеличится читаемость кода, а также уменьшится количество лишних срабатываний хука.

  • Разбивайте большие блоки на более маленькие компоненты

Не надо бояться разбивать большие блоки. Намного проще работать с самостоятельной компонентой, которая решает 1-2 задачи, чем с огромным блоком, который реализовывает в себе большую часть приложения

  • Выносите из компоненты статичные данные

Так как при каждом ререндере компоненты (то есть при вызовы функции) эти данные будут заново инициализироваться.

const color = "red";
const price = 2_999;
const value = 1e5;

export default function App() {
	// const color = "red";       Вот тут значения будут 
    // const price = 2_999; <-    переинициализироваться
    // const value = 1e5;         каждый рендер

return <div className="App"></div>;
}

Данные за компонентой, во-первых, повысят читаемость кода (особенно если оформить ее как upper snake case), а во-вторых, немного увеличат производительность.

  • Чтобы код был оформлен по правилам, используйте специальные инструменты

С ними лучше ознакомиться как можно раньше, так как структурированный код помогает в обучении. Самый частый пример использования инструментов — пара Prettier + ESLint.

ESLint в себе содержит заранее сформированные наборы правил, которые можно использовать — лучше всего для обучения подходит подготовленная конфигурация с правилами от команды Airbnb.

  • Самая лучшая литература по React — это официальная документация

Официальную документацию необходимо прочитать как минимум один раз при изучении библиотеки, а как максимум в будущем периодически перечитывать.

React — очень многогранный и мощный инструмент, который надо знать, начиная с базовых вещей и заканчивая мелкими нюансами, чтобы использовать его на все 100 процентов. 

Больше полезных ссылок

 

Скоро в нашей Академии разработки MediaSoft стартует продвинутый курс по React. Уже открыта регистрация и доступно тестовое задание, подробности по ссылке: https://academy.mediasoft.team/education/react/