Философия React для начинающих

Введение

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

Мне бы очень хотелось, чтобы такие новички, как я (менее года в React) и опытные разработчики, использующие React, с самого начала встречались со статьями, в которых разъясняются принципы React и краткий подход; больше похоже на краткий обзор React, когда они копаются в тоннах учебников и книг. То, что я бы назвал «философией React». Эта статья является одной из многих других, в которых авторы пытаются объяснить шаблоны и принципы проектирования программного обеспечения, концепции и основные функции библиотеки React JavaScript для учащегося.

Background

Фреймворк или библиотека основаны на принципах разработки программного обеспечения, шаблонах проектирования программного обеспечения и вычислительных принципах, которые предпочитают разработчики основной команды при решении задач разработки программного обеспечения. Их предпочтения основаны на компромиссах, лучших практиках и программировании. Есть 1001 способ умереть, аналогично, есть 1001 способ решения проблем в программировании. Разработка программного обеспечения объединяет логическое мышление и творческое решение проблем. Следуйте правилам, но будьте изобретательны в этом. Для начинающих важно понять основополагающие принципы, на которых основана библиотека или структура, которую они изучают. Таким образом, вы ускорите процесс обучения.

Шесть лет спустя

React - это библиотека, а не фреймворк, потому что он не имеет полноты фреймворков. Например, вам понадобятся сторонние библиотеки для получения данных от внешнего вызова, а другие - для маршрутизации, которые предоставляются в инфраструктуре. Для внешних вызовов, получения данных мы можем использовать выборку из WEB API, Axios, JQuery AJAX или других. Любое, что вам нравится.

Тем не менее, React растет, прошло уже 6 лет (2013) с момента его выхода на Facebook. Последняя версия v16.13.1. Как и в React 16.8, в библиотеку были добавлены хуки для управления состоянием функциональных компонентов, у которых не было экземпляров, подобных компонентам класса.

Шаблоны функционального программирования

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

Композиция по наследству

Это одно из основных проектных решений, принятых командой React. Композиция против наследования в дебатах о шаблонах проектирования стара как время. В известной книге «Банды четырех» представлены «второй принцип объектно-ориентированного дизайна»:

Воспользуйтесь композицией объектов, а не наследованием классов.

Команда React выбрала «мощную модель композиции», основанную на опыте работы с миксинами (с ее сложностями и ограничениями в библиотеке на основе компонентов). Mixins заменяет интерфейсы на других языках программирования. Композиция компонентов дает React мощный способ выразить пользовательский интерфейс в браузерах.

JavaScript XML (JSX)

Как видно из названия, это нотация JavaScript для составления разметки для включения в компоненты React. Пример:

Некоторые утверждают, что JSX нарушает принцип разделения задач, которые разметка должна быть в отдельном файле (как у нас есть HTML-файлы в конкурирующих средах). Однако команда React утверждает, что логика разметки и рендеринга тесно переплетены. Напоминает мне мой старый добрый JSP. Одним из преимуществ JSX является то, что он предотвращает инъекционные атаки, потому что «любые значения, встроенные в JSX, экранируются до их рендеринга». Это так же просто, как HTML, хотя на первый взгляд не выглядит интуитивно понятным. Это язык разметки и ничего более.

ES5 и ES6

React лучше всего написан на JavaScript ES6, но имеет обратную совместимость с ES5. Если вы используете:

npm create-react-app myawesomeapp

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

Виртуальный DOM (React DOM)

Здесь React становится интересным. Любой, кто знаком с HTML, знает, как мы можем манипулировать DOM напрямую, используя хороший JavaScript и такие библиотеки, как JQuery. Пример:

var name = document.getElementById(“name”)
document.getElementById(“mybutton”).addEventListener(“click”,   
function(){
 document.getElementById(“demo”).innerHTML = “Hello World”;
});

React имеет виртуальный DOM, называемый React DOM, который является посредником между библиотекой React и браузерной DOM. React DOM использует ReactDOM.render() или ReactDOM.hydrate() (при рендеринге из ReactDOMServer) для вставки наших компонентов React из JSX в DOM. У нас не так много дел с браузером DOM. Реакт позаботится об этом. Это пример Hello World.

import React from 'react';
import ReactDOM from 'react-dom';
// (1) Inserts Hello World DOM Node into the browser 
ReactDOM.render( <h1>Hello, ThankGod!</h1>,, 
document.getElementById(‘root’));
// (2) If it is a component
class HelloWorld extends React.Component {
    render() {
          return (
                  <div>
                    Hello, ThankGod!
                  </div>
                )
        }
};
 
ReactDOM.render(<HelloWorld />, document.getElementById('root'));

ReactDOM.findDOMNode() - это аварийный штрих для поиска подключенных компонентов непосредственно в DOM браузера. ref также может быть прикреплен к компонентам для непосредственного управления ими.

Декларативная парадигма программирования

Проще говоря, React предпочитает точность, лаконичность и краткость, когда логика программы скрыта настолько, насколько это возможно, и задача, которая должна быть выполнена, становится центральной. Это было одно из проектных решений, которые сообщили виртуальному DOM, библиотека абстрагирует DOM и дает нам все для декларативного манипулирования им. Например, по возможности избегайте манипулирования DOM напрямую с помощью ссылок (официальный совет от React core-team).

Компоненты: класс и функциональные компоненты

Основными строительными блоками React являются компоненты, которые вставляются в DOM («документ с логическим деревом»). React реализует независимый от браузера DOM, который имеет широкий спектр DOM-элементов, присутствующих в HTML, используемых для создания наших компонентов и почти всех событий, которые вам понадобятся.
Компоненты могут быть определены как компоненты класса или функциональные компоненты, которые оба принимают реквизиты (свойства или данные, передаваемые из компонента в компонент) в конструкторе класса или аргументе функции. React продвигает нисходящий поток данных сверху вниз, поэтому реквизиты передаются от родителя к потомкам. Не может быть передано вверх по дереву компонентов. Состояния (внутреннее поведение) в классах встроены, потому что они имеют к ним доступ, в то время как функциональные компоненты используют хуки для управления своими состояниями, потому что они являются чистыми функциями и не имеют экземпляров.

// Class Component
class ThankGodComponent extends React.Component{
  constructor(props){
      super(props);
      this.state{
        name:'ThankGod',
      }
 } 
 render(){
    return <h1> `Hello, {this.state.name}, `{this.props.surname}`</h1>
 }
}//functional component
function ThankGodComponent(props){
  const[name, setName] = useState('ThankGod');
 render(){
    return <h1> `Hello, {name}, `{props.surname}`</h1>
 }
}

Методы жизненного цикла

Методы жизненного цикла управляют монтированием, обновлением и размонтированием компонента React. Для компонентов класса они являются componentDidMount, componentDidUpdate и componentWillUnmount в последовательном порядке. В функциональных компонентах используются встроенные хуки, и наиболее важным является хук useEffect.

PropTypes

React добавляет проверку типов в компонент, используя propTypes (определения типов), который определяет тип реквизита, передаваемого в компоненты. Хотя начиная с React v.15.5 он был перемещен в библиотеку, которую вы можете импортировать. Это напоминает нам о том факте, что React - это библиотека, которая нуждается в некоторых других библиотеках для обеспечения основных функций, которые мы встроили бы в другие фреймворки.

import PropTypes from 'prop-types';

ThankGodComponent.propTypes = {
  name: PropTypes.string
};

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

DefaultProps

Мы можем определить реквизиты по умолчанию, используя статическую переменную функционального или классового компонента, или мы можем использовать компоненты высшего порядка сторонних библиотек, например, «Восстановить».

Границы ошибок

Это способ отлавливать ошибки в компонентах React. Границы ошибок не улавливают ошибки внутри обработчиков событий, SSR, асинхронного кода: «Ошибки, выбрасываемые на самой границе ошибки (а не ее дочерних элементах)».

React тестирование приложений

React имеет встроенную поддержку для тестирования компонента частично или полного теста дерева компонентов. Самым доминирующим инструментом является Jest. Там много библиотек для тестирования приложений React.

Некоторые расширенные концепции включают в себя:

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

Другим является Context API, который является встроенной функцией React для управления состоянием приложения без внешней библиотеки.

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

Рендеринг на стороне сервера в React выгоден из-за его преимуществ для SEO, медленного сетевого и социального обмена, но не является основной функцией, считается одной из самых сложных для реализации.
React использует эвристический O (n) для своего алгоритма сравнения, чтобы обновить дерево компонентов таким образом, чтобы два разных типа элементов давали нам разные деревья. Разработчик может использовать такие концепции, как React.Memo, useCallBack и Purecomponent для оптимизации компонента и предотвращения повторного рендеринга, который может быть дорогим.

Вывод

В этой статье вы найдете знания, распространяемые по документации React, учебным пособиям, сайтам вопросов и ответов, таким как Stackoverflow, раздел вопросов github и книги React. Есть сотни учебников по каждому предмету. На самом деле, если вы изучите все ключевые понятия здесь и прочитаете всю справочную информацию по API React, вы бы прочитали практически все, что есть в React, чего сейчас не хватает, так это опыта. Убедитесь, что вы хорошо владеете ванильным Javascript, прежде чем начинать или продолжать путешествие. Запустите простые проекты, такие как «Калькулятор», небольшое приложение для социальных сетей, приложение для задач, приложение для календаря и к тому времени, когда вы закончите. Вы бы прошли очень долгий путь.

Понравилась статья?

Записывайся на наши курсы программирования React и стань профессиональным React-разработчиком!