Большая часть моего технического опыта связана с наукой о данных. Это означает использование блокнотов Jupyter, таких пакетов, как scikit-learn и pandas, статистических тестов, нейронных сетей и, прежде всего, исследовательского анализа и визуализации данных, а также практики написания и формирования концепций высокого уровня для понимания данных. Поэтому изучение React из этого уголка технологической вселенной - трудный и поучительный опыт.

Что такое React?

React - это библиотека Javascript для разработки пользовательских веб-интерфейсов. Раньше разработчикам приходилось создавать веб-сайты с использованием технологий, эквивалентных обычным: им приходилось разрабатывать веб-страницы с вручную закодированной структурой HTML с помощью тегов ‹div›, ‹p›, и ‹h1›, ‹h2› и т. Д. Им пришлось стилизовать контент, заполнив этот HTML-код с помощью CSS. Им пришлось использовать Javascript для обработки интерактивности, такой как нажатие кнопок и получение контента, хранящегося в другом месте. Если вы щелкнете правой кнопкой мыши по странице, которую читаете прямо сейчас, и «просмотрите», вы увидите, что эти три технологии используются для отображения этой текущей страницы, причем HTML является основной основой для ее содержания в консоли вашего браузера.

Итак, если эти технологии все еще используются, тогда почему существует React? React существует, потому что он справляется со сложностями объединения этих технологий для взаимодействия с динамическим веб-управлением данными, эффективно отслеживая «состояния» на высоком уровне абстракции с помощью своего базового фундаментального строительного блока: компонента React. .

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

В чем основные отличия от рабочего процесса Data Science?

Я признаю, что многие из этих концепций сложны и совершенно чужды моему опыту в области науки о данных. Большая часть науки о данных происходит на Python. Существует очень мало возможностей или причин для использования Javascript, HTML, CSS, Node.js или менеджеров пакетов и веб-пакетов для среды, поддерживающей React.

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

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

Что такое компоненты React?

Основываясь на моих 10-ти часах уроков по React, как настоящий новичок, я опишу свое понимание компонентов.

Компоненты - это строительные блоки React. Они написаны на Javascript и содержат расширения Javascript, такие как JSX и Typescript. Сначала это поможет объяснить, как приложение React работает наоборот. Ниже приводится простейший пример React из официального руководства по React:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Это не компонент. Это последний фрагмент кода, который фактически сообщает интерфейсу браузера (его внутреннему DOM) отображать все, что ему сообщает React, и обычно он находится в самом конце файла .js, содержащего приложение React. В этом случае ‹h1› Hello, world! ‹/H1› - это всего лишь фрагмент JSX (расширение Javascript, похожее на HTML), который ReactDOM.render () сообщает DOM браузера о необходимости визуализации. строка Hello, world!

Обычно в скобках содержится не только строковый JSX. Как и в случае с примером крестиков-ноликов в основном руководстве, фактически визуализируемым материалом будет компонент React:

ReactDOM.render(
  <Game />,            // this line is the React component
  document.getElementById('root')
);

Сам компонент всегда будет иметь другие компоненты в качестве дочерних, как классы в Python. Фактически, компоненты, которые ведут себя как классы, называются компонентами класса, а компоненты, которые ведут себя как функции, называются… как вы догадались, функциональными компонентами.

Для чего нужны компоненты React?

Так в чем же большая разница по сравнению с классами Python?

Компонент ‹Game /› в приведенном выше примере крестиков-ноликов выглядит следующим образом. Не смотрите слишком внимательно, это только для общего обзора:

class Game extends React.Component {
 [...]    \\ collapsed for brevity
  handleClick(i) {
    const history = this.state.history;
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      xIsNext: !this.state.xIsNext,
    });
  }
}

Как мы видим, код ReactDOM.render () ссылается на этот компонент Game, который является компонентом класса React, а этот компонент Game, в свою очередь, ссылается на дочерние компоненты (невидимые) Board и Square.

Основное отличие от классов Python заключается в том, что компоненты React, подобные приведенному выше, отслеживают состояние приложения. На протяжении всей игры в крестики-нолики каждый ход представляет собой отдельное состояние игры. Это правильный подход к любому приложению React. В приведенном выше примере переменная history содержит все прошлые состояния. Он описывает, как было достигнуто текущее состояние игры посредством набора ходов, возвращающихся к исходному состоянию. Кроме того, хорошо спроектированные компоненты React предназначены для изменения только того, что нужно изменить, и ограничения отслеживания состояния неизменными изменениями последовательно создаваемых прошлых состояний.

Другими словами, вместо того, чтобы структурировать приложение с помощью файлов .css, .html и .js, которые работают как единое трио, каждый компонент React содержит свой собственный бит Javascript (JSX), HTML и стили. Это означает, что компоненты React можно повторно использовать без повторного рендеринга всего интерфейса с нуля, эффективно минимизируя затраты на переход между состояниями в пользовательском интерфейсе. В терминах крестиков-ноликов это означает простой переход от шага 8 к ходу 2 (или, возможно, в реальном производственном приложении React состояние 12000 в состояние 2) без каких-либо избыточных вычислений. Это увеличивает скорость, снижает вычислительные затраты и снижает сложность.

Мне кажется, что эти преимущества проистекают из изначальной сложности компонентов React. Новичку их сложно понять по какой-то причине. Любое руководство по HTML и Javascript всегда начинается с базового подхода, основанного на целостном трио, потому что эта модель для веб-разработки была концептуально доступна параллельно с историей веб-разработки. В физике это похоже на необходимость понять греческую и ньютоновскую физику, чтобы понять, как недостатки этих моделей мира проложили путь к теории относительности. Хотя теоретически возможно изучить чисто современные методологии, это парадоксально помогает познакомиться с беспорядочными, но связными объектами, которые ведут к более всеобъемлющему, но сложному состоянию настоящего.

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