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

1. React — это фреймворк или библиотека?

React — это библиотека JavaScript, а не фреймворк. В отличие от фреймворков, которые предоставляют полный набор инструментов и реализуют определенный способ создания приложений, React фокусируется на конкретном аспекте — рендеринге пользовательского интерфейса. Это делает React очень гибким и популярным, поскольку он следует философии Unix: делать что-то одно и делать это хорошо.

2. Виртуальный DOM

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

Для этого решения мы используем Виртуальный DOM. Виртуальный DOM — это всего лишь виртуальное представление DOM. Когда состояние приложения изменяется, вместо реального DOM обновляется виртуальный DOM.

Виртуальный DOM каждый раз создает дерево, а элементы представляются в виде узла. Если какой-либо из элементов изменяется, создается новое виртуальное дерево DOM. Затем новое дерево сравнивается или «отличается» от предыдущего дерева.

На этом изображении красные кружки обозначают измененные узлы. Эти узлы представляют элементы пользовательского интерфейса, которые меняют состояние. Затем сравнили предыдущее дерево и текущее измененное дерево. Обновленное дерево затем пакетно обновляется до реального DOM. Это делает React выдающейся высокопроизводительной библиотекой JavaScript.

В итоге:

1. Обновляется весь виртуальный DOM.
2. Виртуальный DOM сравнивается с тем, как он выглядел до обновления. React определяет, какие объекты изменились.
3. Измененные объекты и только измененные объекты обновляются в реальном DOM.
4. Изменения в реальном DOM приводят к изменению экрана.

3. JSX

JSX (JavaScript XML) позволяет писать HTML-код в React. Он преобразует теги HTML в элементы React с помощью функции React.createElement(компонент, реквизит, …дети).

Например:
JSX-код:

  Hello, Good Morning!

Этот пример компилируется в:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Примечание: Пользовательские компоненты должны начинаться с заглавной буквы. Теги нижнего регистра рассматриваются как элементы HTML.

4. Реквизит в JSX

В JSX реквизиты можно указать несколькими способами:

Выражения JavaScript в качестве реквизита:

Здесь props.sum имеет значение 6.

Строковые литералы:

Оба примера выше эквивалентны.

По умолчанию для реквизита установлено значение «True»
Если мы не передаем значение свойства, по умолчанию оно равно true.

Например,

Оба примера выше эквивалентны.

5. Компоненты класса

Компоненты в React можно определить как классы или функции. Вот как определить компонент класса:

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6. Жизненный цикл компонента

Компоненты имеют методы жизненного цикла, которые можно переопределить для запуска кода на определенных этапах:

Монтаж: Когда компонент создается и вставляется в DOM.

• конструктор()
• оказывать()
• компонентDidMount()

Обновление: При изменении реквизита или состояния.

• оказывать()
• компонентDidUpdate()

Размонтирование: При удалении компонента из DOM.

• компонентWillUnmount()

7. Свойства класса

defaultProps позволяет определить значения свойств по умолчанию:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

Если props.color не указан, по умолчанию используется серый цвет.

8. Типы реквизита

Мы можем использовать prop-types для проверки типов передаваемых свойств компонентов. Выдает ошибки, если они не совпадают.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

Это предупредит о несоответствии типа идентификатора.

9. Оптимизация производительности

React создан для повышения производительности, но вы можете его оптимизировать:

Использование производственной сборки:

npm run build

Это создает производственную сборку с оптимизацией.

Сверните исходный код: Будьте осторожны с изменениями исходного кода React.

Разделение кода: Объедините код JavaScript в фрагменты для загрузки по мере необходимости.

10. Реагирующие хуки

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

useState: Добавляет состояние к компонентам функции.

function Example() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: Управляет побочными эффектами в функциональных компонентах.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

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

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

Спасибо за чтение и удачного программирования! ?