10 основных фундаментальных концепций React.js

React.js Самая популярная библиотека javascript для создания интерактивного пользовательского интерфейса. Мало того, вы можете создать очень мощное веб-приложение с помощью react js. Сегодня я обсужу с вами около 10 react.js

Содержание

Примирение React Tree
Как работает виртуальный дом
Реагировать Компоненты
Состояние реакции и реквизит
JSX — Javascript XML
Реквизит по умолчанию
Вложенный элемент реакции
Props-типы в React
Контекстный API реакции
В отличие от события vanilla js и события React

Итак, начнем

читать быть с пациентом

1. Примирение React Tree

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

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

Когда мы сообщаем React обновить дерево элементов, которое он ранее визуализировал, он генерирует новое виртуальное представление обновленного дерева. Теперь React имеет 2 версии дерева в памяти!

Чтобы отобразить обновленное дерево в браузере, React не отбрасывает то, что уже было отрендерено. Вместо этого он сравнивает две виртуальные версии дерева, находящиеся в памяти, вычисляет различия между ними, выясняет, какие поддеревья в основном дереве нужно обновить, и обновляет только эти поддеревья в браузере.

2. Как работает виртуальный дом

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

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

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

На изображении ниже показано виртуальное дерево DOM и процесс сравнения.

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

надеюсь, вы поймете, как реагировать на работу виртуального дома. одним словом я хочу сказать, что react virtual dom обновит тот элемент, который вы обновите, без этого react не коснется другой вещи

3. Реагировать на компоненты

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

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

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

Например, вы даже можете пойти дальше и создать Button компонент, который может обрабатывать значки. Затем каждый раз, когда вам понадобится кнопка, у вас будет компонент для использования. Если сделать его более модульным, вы сможете охватить множество случаев одним и тем же фрагментом кода. Вы должны целиться где-то посередине. Ваши компоненты должны быть достаточно абстрактными, но не слишком сложными.

class IconButton extends React.Component {
  [...]
  render() {
    return (
      <button onClick={this.props.onClick()}>
        <i class={this.props.iconClass}></i>
      </button>
    );
  }
}

5. JSX — Javascript XML

JSX — это расширение синтаксиса для Javascript, используемое в ReactJS, которое позволяет писать Javascript, похожий на HTML. Другими словами, это своего рода язык шаблонов, но с мощью Javascript.

Давайте посмотрим на пример кода JSX, чтобы вы знали, как он выглядит:

class Main extends React.Component {
	render() {
		return <h3 className=„title">Hello, Duomly!</h3>;
	}
}

Прямо сейчас вы можете увидеть код JSX внутри функции render(). Это очень похоже на HTML. После компиляции JSX транслируется в обычные вызовы функций Javascript, и вот как это выглядит:

class Main extends React.Component {
	render() {
		return (
			React.createElement(
				„h3”,
				{ className: ‚title’},
				‚Hello, Duomly!’
			)
		)
	}	
}

Таким образом, JSX — это более простой способ использования метода React.createElement(). React.createElement() помогает создать код без ошибок, потому что он выполняет проверки во время компиляции, и, наконец, результатом выражения JSX является объект, как показано ниже:

const title = {
	type: ‚h3’,
	props: {
		className: ‚title’,
		children: ‚Hello Duomly!’
	}
}

Рекомендуется использовать JSX в ReactJS, потому что это приносит некоторые преимущества вашим приложениям. Вот почему вы должны использовать JSX: — он упрощает создание шаблонов компонентов — он быстрее, чем Javascript, потому что выполняет оптимизацию при переходе на JS — он помогает сохранить логику и шаблон вместе как компоненты без беспорядка

Но если по какой-то причине вы не хотите использовать JSX, вам и не нужно; чистый Javascript также приемлем в ReactJS.

Наконец, просто чтобы уточнить, что именно означает JSX. JSX означает расширение JavaScript или JavaScript XML.