Что бы я хотела знать о React

Что бы я хотела знать о React

От автора: пару недель назад я начала работать над своим первым приложением React. Это было не только мое первое приложение React, но и мое первое приложение React Native, поэтому многое для меня было в новинку.

В сравнении с миром Angular (и Ionic), я чувствовал, что все мои предвзятые представления и идеи переворачиваются с ног на голову. Мне удалось собрать (как я думаю) довольно приличное приложение, но у меня было много препятствий на этом пути. Это отчасти потому, что я предпочитаю учиться, просто погружаясь. Таким образом, многие из этих сложностей могли быть решены просто с помощью документации.

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

React — это библиотека, а не фреймворк

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

В чем разница между библиотекой и фреймворком?

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

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

Что это на самом деле означает?

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

Например, я часами пыталась понять, как делать простые вещи, такие как отправка запроса к API в React. В Angular я бы использовал их специфичный HttpClient для Angular, но в React этого не существует. Только когда добрый пользователь твиттера высказал (теперь очевидное) мнение, что я могу использовать простой запрос Javascript fetch(), у меня появилась реализация.

Итак, я пересмотрела свои ожидания относительно того, что React сделает для меня. Когда мне нужно решить проблему, я знаю, что сначала нужно использовать Javascript, а не React.

React — библиотека пользовательского интерфейса

React — это не только библиотека, она предназначена специально для пользовательского интерфейса. Опять же, это должно быть очевидно, учитывая, что так написано на их сайте, но я недостаточно это усвоила. Причина, по которой это так важно понимать, схожа с тем, почему я могла бы просто использовать собственный API браузера fetch().

Если то, что вы пытаетесь сделать, не имеет прямого отношения к чему-то визуальному на экране, для React это все равно. В сравнении с Angular мне нравится думать об этом так: Angular — это фреймворк для проектирования и создания приложений. Он, по большей части, не меняет способ написания HTML или CSS, но он сильно контролирует способ написания Javascript.

React, с другой стороны, это библиотека для создания пользовательских интерфейсов. Он, по большей части, не меняет способ написания Javascript, который напрямую не связан с вашим пользовательским интерфейсом, но он сильно контролирует способ написания HTML и CSS (или его эквивалента). И это подводит меня к следующему пункту…

Библиотеки компонентов React всегда предназначены для пользовательского интерфейса

Это то, что действительно не имело смысла для меня, когда я впервые столкнулась с этим. Взять, к примеру, библиотеку apollo-react. В этой библиотеке вы можете использовать элемент <Query>, который будет выполнять запрос GraphQL и возвращать результат прямо в разметке компонента.

import React from ‘react’;
import {Text} from ‘react-native’;
import gql from ‘graphql-tag’;
import {Query} from ‘react-apollo’; const MY_QUERY = gql`query …{} `; const ExamplePage = (props) => { return ( <View> <Query query={MY_QUERY}> {({ loading, error, data }) => { if (loading) return <Text>Loading</Text>; if (error) return <Text>Error</Text>; return <Text>{ JSON.stringify(data) }</Text>; }} </Query> </View> );
};

Будучи настолько привыкшей к способу модель-представление-контроллер, я думала (и, если честно, до сих пор думаю), что это неестественный способ взаимодействия с API. Конечно, вы также можете использовать функцию Javascript useQuery() из библиотеки react-apollo, но она также имеет свои довольно существенные ограничения.

Я также сталкивалась с этой проблемой при попытке использовать ActionCable с React. Пакет react-actioncable-provider для подписки на ActionCable находится в компоненте UI. Если вы просто хотите подписаться на канал и не сразу отображать данные на странице, этот пакет не то, что вам нужно.

Компоненты будут обновляться, хотите вы этого или нет

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

const BadExamplePage = (props) => { const [user, setUser] = useState(); getUser().then((u) => setUser(u)); return ( … );
};

Не делайте этого!

Если вы используете React, вы поймете, почему это ужасная идея. Функция getUser() вызывается, когда компонент обновляется. Затем он изменяет состояние переменной user, и это изменение вызывает обновление компонента, и так далее, и так далее.

С тех пор я узнал, что мы не всегда можем точно контролировать, когда или как часто компонент будет перерисовываться, поэтому для таких случаев нам нужно использовать useEffect()…

useEffect является основным

useEffect() — это для меня как безопасное убежище в запутанном мире компонентов React. Это для тех случаев, когда вы просто говорите: «Могу ли я просто написать Javascript, который будет выполняться один раз, пожалуйста?».

Хотя по умолчанию код внутри блока useEffect() выполняется при каждом повторном рендеринге, мы можем выбрать их выполнение только при изменении определенных значений или только один раз. Мы делаем это, передавая второй аргумент useEffect(), с массивом переменных, и, если их значение должно измениться, мы хотим, чтобы функция запускалась снова.

const BetterExamplePage = (props) => { const [user, setUser] = useState(); useEffect(() => { getUser().then((u) => setUser(u)); }, [ /* dependencies */ ]); return ( … );
};

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

Автор: Ire Aderinokun

Источник: https://bitsofco.de

Редакция: Команда webformyself.