Автор оригинала: FreeCodeCamp Community Member.
Сегодня я собираюсь выделить основы мира реагирования. Если вы только что начали свое путешествие в ReactJS, то я бы сказал, что вы приземлились в нужном месте. В этой статье я пытался охватить основы реагирования очень простым способом. Я надеюсь, что в конце статьи вы узнаете фундаментальные концепции реагирования.
Давайте начнем.
Rectjs – мощная библиотека
Как вы, возможно, уже прочитали во многих местах, Rect – это библиотека для создания веб-сайтов и мобильных интерфейсов. Это было разработано Facebook.
REVENTJS – компонент, управляемый компонентами. Все является компонентом, который отвечает за некоторые функциональные возможности. Вы пишете небольшие маленькие компоненты, а затем объедините их вместе, чтобы сформировать большие компоненты. Это делает код более читаемым и понятенным. Особенности, которые делают реагировать мощным и красивым:
- Он использует концепцию виртуальной DOM вместо настоящего Дома.
- Читаемость кода из-за JSX. Использование JSX позволяет вам почувствовать, что вы пишете веб-приложения (дает поиск JavaScript, как HTML).
- Он также использует SSR (SSR помогает в SEO).
Это то, о чем вы могли бы прочитать, но вы будете понимать и почувствовать, когда вы проходите через это руководство. Итак, давайте погрузимся в концепцию виртуального дома (я бы сказал, что это главная особенность, которая делает реагирование более красивым).
Reactjs виртуальный домо
Виртуальный дом – копия настоящего дома. В отличие от реального DOM, виртуальный DOM делает минимальное количество манипулирования DOM для обеспечения современной. Это только обновляет часть, которая была обновлена.
Манипулирование DOM очень легко. Вот визуальная демонстрация того, как работает виртуальный дом:
- Виртуальный дом – копия настоящего дома.
2. Когда данные изменяются в компоненте, весь интерфейс повторно отображается в виртуальном доме.
3. Тогда происходит сравнение между настоящим домом и виртуальным домом.
4. Как только расчет будет сделан, реальный дом обновляется с вещами, которые изменяются.
Мы говорили о одной из великих особенностей реагирования – это виртуальный дом, но ждать! Какой был JSX во второй функции (выше точек на функцию)? Возможно, вы подумали, что это было, каково было его отношение к реакции, и как оно дает нам ощущение написания веб-приложений …
Теперь на этот раз давай погрузимся в бассейн JSX.
Jsx.
Прежде чем двигаться вперед, давайте посмотрим на следующий код:
class FirstComponent extends React.Component {
render() {
return (
My First Component
);
}
}class FirstComponent extends React.Component {
render() {
return (
React.createElement('span',{className: 'customSize'}, 'My First Component')
);
}
}В первом примере функция Render выглядит так, будто она возвращается HTML-код, но это JSX. Первый пример – версия JSX второй Отказ JSX – это расширение JavaScript, которое дает ваш код JS HTML-дисплеи.
Если вы посмотрите на второй пример, RECT.CREATEDEDELEDE используется для создания реактуального элемента для представления компонента реагирования. Второй аргумент может быть нулевым или пустым, если для элемента для элемента необходимы реквизиты или атрибуты. Третий аргумент определяет, что должно быть внутри него (как любой другой элемент реагирования, скажем,
Если вы посмотрите на вышеупомянутые два блока кода, вы найдете первую более знакомую, поскольку ощущение HTML. JSX также увеличивает читаемость кода. Давайте посмотрим на другой пример, без JSX и JSX, чтобы почувствовать удовольствие для чтения кода.
ReactJS без JSX:
React.createElement("div", null,
React.createElement("img", {src: "image.jpg", alt: "Random photo"}),
React.createElement("h3", null, "Hello React"));Reventjs с версией JSX:
Hello React
Посмотрев на вышеприведенный пример, вы можете понять, что я говорил относительно читаемости кода. Насколько легко читать код с JSX, верно? Я думаю, что этого достаточно на JSX, и я надеюсь, что теперь вы можете лучше понять мощность JSX в мире реагирования.
Примечание – Браузеры не могут читать JSX. Итак, мы должны транпилировать его в JavaScript с помощью трансформаторов JSX (скажем, Babel), чтобы браузер мог понять.
Теперь мы знаем, что такое JSX. Но я хотел бы, чтобы вы пошли на предыдущую картину, где я писал, что реагировать все о компонентах. Это компонент управляет. Поскольку компоненты являются строительными блоками реагирования, давайте рассмотрим их.
Rectjs Сердце – Компоненты
Ну, вы могли бы наступить на следующий код, как создавать компоненты во время исследования по реакции:
class MyStatefulComponent extends React.Component {
state = {
title: ''
}
componentDidMount() {
console.log('Component mounted')
}
render() {
return {this.props.name};
}
}Если вы пишете свой компонент в вышеупомянутом способе, это называется Класс/штат/контейнер составная часть. Если вы думаете, что это единственный способ создания компонентов, подумайте еще раз. Да, есть еще один способ создания вашего компонента, который приводит к Функциональные/нестандартные/презентационные компоненты. Прежде чем двигаться вперед, давайте посмотрим, как написаны функциональные компоненты:
const MyStatelessComponent = props =>{props.name};
Теперь вы можете задаться вопросом, в чем разница между ними и тем, как вы должны выбрать, какой тип создания. Итак, давайте погрузимся в бассейн компонентов штаба и без гражданства.
Без гражданства (или презентационные или функциональные) Компоненты – это те компонента, которые не имеют никакого состояния (не знаю о состоянии? Не заботятся, я объясню это в более поздней части). Они используются для презентации, как как вы хотите, чтобы ваш компонент посмотреть.
Компонент представляет собой простой JavaScript функцию, которая принимает опоры в качестве аргумента и возвращает элемент React (см. Выше пример). Его название самоуверенно – у него нет государства. Он не имеет методов жизненного цикла (например ComponentDidmount Метод и т. Д., Которые вы могли бы прочитать во время исследования на учебниках на реагирование).
Штат (или контейнер или класс) Компоненты – это те компоненты, которые имеют состояние – источник данных (вы можете вызвать это. SettState внутри него), методы жизненного цикла (могут использовать для создания вызова API). Это класс JavaScript, который расширяет свой реактивный компонент, что означает реагирование, создает его экземпляры. Реагируйте инициализируйте класс компонента, чтобы использовать методы жизненного цикла, для инициализации состояния и многое другое.
Подожди … Теперь вы можете удивиться, какой из них лучше, а что выбрать? Вы можете ответить на этот вопрос, если у вас есть этот вопрос, о том, как отделить логическую часть от презентационного. Да, странно, что один вопрос отвечает на другой вопрос, но вы скоро получите, почему я это сказал.
Как вы, возможно, видели в других учебных пособиях по реагированию, они используют класс для создания их компонентов. Они ставят логично, а также презентационные части в том же компоненте, что делает этот компонент более сложным и громоздким.
Таким образом, если вы хотите отделить свой логический от презентационных компонентов, то класс компонентов лучше всего подходит для логических вещей, таких как получение данных из API или изменения данных. С другой стороны, если ваш компонент ориентирован на презентационные/функциональные вещи, компонент должен выглядеть хорошо.
Короче говоря, я бы сказал, использовать оба. Используйте класс компонентов, когда вам нужна одна из вещей (методы жизненного цикла, состояние) и для презентации, используйте функциональный компонент.
Это все о компонентах.
Теперь у нас есть изображение того, как мы можем написать компоненты, но я не сказал вам, как мы можем управлять данными в них. Я думаю без данных, компоненты были бы бесполезны. Итак, мы посмотрим на то, как мы можем управлять данными компонента (например, получать данные из API, реагируйте «состояние» истории, устанавливая состояние и т. Д.).
Давайте начнем.
Реквизит
«Опора» является сокращением для свойств, и это один источник данных в нашем компоненте. Его можно использовать для передачи данных к разным компонентам. Ждать! Я хотел бы, чтобы вы вернулись, где я рассказал вам о компонентах презентационного и класса. Я сказал вам использовать компоненты презентации для управления, как ваш компонент должен выглядеть, и контейнеры для обработки данных и все это. Верный!
Таким образом, «опора» – это тот, который мы можем использовать, чтобы сделать соединение между этими двумя типами компонентов. Да, вы можете использовать реквизиты для передачи данных из компонента контейнера к презентационному компоненту, где презентационный компонент окажет представление с вашими динамическими данными. Пожалуйста, посмотрите на следующий код, чтобы лучше понять:
import {ButtonView} from './button.presentation';
class MyContainerComponent extends React.Component {
state={
text : 'Submit'
}
render() {
return (
)
}
} export const ButtonView=({btnText})=>(
)Как и вышеупомянутый путь (используя опоры – ‘btntext’), вы можете отделить логическую часть от презентационной части. Другая особенность реквизитов заключается в том, что они только читаются, то есть они неизменны. Они не собираются изменить внутри компонента, в котором они передаются. Поток данных также является однонаправленным – что дает нам односторонние передачи данных (в отличие от угловых).
Но могут быть случаи, когда мы хотим изменить данные (например, в каком-то событии пользователем и т. Д.). Следовательно, для этого случая «государство» выходит на рынок реагирования. Давайте погрузимся в это.
Состояние
Как я уже говорил, реквизиты являются неизменными, тогда как состояние предназначено для мусорных данных – то есть данные, которые будут изменяться в ответ на определенные события. Итак, если вы хотите изменить значение вашего значения, то сохраните его в состоянии. Состояние – это объекты, которые хранят данные вашего компонента. Чтобы дать лучшее изображение того, как определяется штат и как его использовать, вот пример:
class LoginContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
};
}
onFilluserName = event => {
this.setState({
userName: event.target.value,
});
}
render() {
return (
);
}
}Из приведенного выше примера вы можете видеть, что состояние представляет объекты, где хранятся данные вашего компонента. Они инициализируются внутри конструктора. Вы можете получить доступ к состоянию, используя «this.state». Это способ использования состояния для отображения ваших данных в вашем компоненте.
Но я сказал вам, что вещь, которая делает государство, сердце ваших компонентов – это его смежное поведение. Да, теперь точка приходит к тому, как мы можем изменить свойство штата. Ответ использует «this.setstate» (пожалуйста, посмотрите вышеприведенный пример). Использование этого.SetState, мы изменили наше значение данных при типов пользователей.
Короче говоря, реквизиты и состояние являются источниками данных, но их использование и поведение отличается. Всякий раз, когда есть случай, когда ваши данные могут измениться, использовать «состояние» для этого – иначе «опора» – хороший выбор.
Это все о основах мира реагирования. Я надеюсь, что у вас лучше понимать основы.
Существует очень важная часть компонента класса, который я не обсуждал: методы жизненного цикла. Да, методы жизненного цикла являются еще одной критической частью реагирования, но что они есть и почему они важны, будут в моей следующей статье!
Спасибо за прочтение.