Рубрики
Без рубрики

Все фундаментальные концепции реагирования.

Обновление: эта статья теперь является частью моей книги «REVECT.JS за пределы основы». Программа обновленной версии этого контента и далее о реагировании на jscomplete.com/react-beyond-basics.Эта. Эта статья не собирается покрывать то, что реагирует Есть или почему вы должны узнать это. Вместо этого это практично

Автор оригинала: FreeCodeCamp Community Member.

Эта статья не собирается покрывать, что реагирует или Почему вы должны узнать это Отказ Вместо этого это практическое введение в основы REVECT.JS для тех, кто уже знаком с JavaScript и знает основы Дом API Отказ

Все приведенные ниже примеры кода маркируются для справки. Они чисто предназначены для обеспечения примеров концепций. Большинство из них могут быть написаны гораздо лучшим способом.

Фундаментальный # 1: Реагировать все о компонентах

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

Все компоненты маленькие или большие многоразовые, даже в разных проектах.

Актуальный компонент – в его простейшей форме – является простой функцией JavaScript:

// Example 1
// https://jscomplete.com/repl?j=Sy3QAdKHW
function Button (props) {
  // Returns a DOM element here. For example:
  return ;
}
// To render the Button component to the browser
ReactDOM.render(, mountNode)

Курли, используемые для метки кнопки, объяснены ниже. Не беспокойтесь о них сейчас. Реагировать Также будет объяснено позже, но если вы хотите проверить этот пример, и все примеры предстоящих кодов, вышеупомянутые оказывать Функция – это то, что вам нужно.

Второй аргумент к Reactom.runder это элемент назначения DOM, который реагирует, собирается взять и контролировать. В JSComplete React Playground , вы можете просто использовать специальную переменную Mountnode Отказ

JavaScript Repland и Playground для React.js Испытайте современный JavaScript и REVIET.JS код в браузере без каких-либо конфигураций jscomplete.com/react.

Обратите внимание на следующие пример 1:

  • Название компонента начинается с заглавной буквы. Это требуется, поскольку мы будем иметь дело со смесью элементов HTML и элементы реагирования. Строчные имена зарезервированы для элементов HTML. На самом деле идите вперед и попробуйте назвать кнопку «React Component», и посмотрите, как Reactry проигнорирует функцию и отображает регулярную пустую кнопку HTML.
  • Каждый компонент получает список атрибутов, таких как элементы HTML. В реакции этот список называется реквизит Отказ С помощью функционального компонента вы можете назвать это ничего.
  • Мы странным написали, что выглядит как HTML в возвращенном выходе Кнопка Функциональный компонент выше. Это ни JavaScript, ни HTML, и это даже не Rect.js. Но настолько популярно, что он стал по умолчанию в реактивных приложениях. Это называется Jsx И это расширение JavaScript. Jsx тоже компромисс ! Перейдите вперед и попробуйте верните любой другой HTML-элемент внутри функции выше и посмотрите, как все они поддерживаются (например, вернуть текстовый входной элемент).

Фундаментальный # 2: Какой поток jsx?

Пример 1 выше может быть написан в Pure Revief.js без JSX следующим образом:

// Example 2 -  React component without JSX
// https://jscomplete.com/repl?j=HyiEwoYB-
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// To use Button, you would do something like
ReactDOM.render(
  React.createElement(Button, { label: "Save" }),
  mountNode
);

творчество Функция – это основная функция в API RACH верхнего уровня. Это 1 из 8 вещей в этом уровне, который вам нужно учиться. Вот как маленький API RACT.

Очень похоже на сам дом, имеющий Document.Createlement Функция для создания элемента, указанного в имени тега, Rection творчество Функция – это функция более высокого уровня, которая может делать то, что Document.Createlement Делает, но он также может быть использован для создания элемента для представляющей реактивный компонент. Мы сделали последнее, когда мы использовали Кнопка Компонент в примере 2 выше.

В отличие от Document.Createlement , Рейкт творчество Принимает динамическое количество аргументов после второго, чтобы представлять дети созданного элемента. Итак, творчество на самом деле создает дерево Отказ

Вот пример этого:

// Example 3 -  React's createElement API
// https://jscomplete.com/repl?j=r1GNoiFBb
const InputForm = React.createElement(
  "form",
  { target: "_blank", action: "https://google.com/search" },
  React.createElement("div", null, "Enter input and click Search"),
  React.createElement("input", { name: "q", className: "input" }),
  React.createElement(Button, { label: "Search" })
);
// InputForm uses the Button component, so we need that too:
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

Обратите внимание на несколько вещей о примере выше:

  • Informform не является компонентом реагирования; Это просто реагировать элемент Отказ Вот почему мы использовали его прямо в Reactom.runder Звоните, а не с />.
  • Rect.Createelement Функция приняла несколько аргументов после первых двух. Его список аргументов, начиная с 3-го одного, включает в себя список детей для созданного элемента.
  • Мы смогли гнездить Rect.Createelement звонки, потому что это все JavaScript.
  • Второй аргумент к Rect.Createelement Может быть нулевой или пустой объект, когда для элемента для элемента для элемента не требуется никаких атрибутов или реквизитов.
  • Мы можем смешивать элемент HTML с реактивными элементами.
  • API Reg api пытается быть как можно ближе к API DOM, поэтому мы используем классное значение вместо Класс для входного элемента. Тайно, мы все желаем, чтобы API Regact станет частью самого самого API DOM. Потому что, вы знаете, это намного лучше.

Вышеуказанный код – это то, что браузер понимает, когда вы включите библиотеку RACT. Браузер не имеет дело с каким-либо бизнесом JSX. Тем не менее, мы люди любим видеть и работать с HTML вместо этого творчество Звонки (представьте себе создание сайта только Document.Createelement , который вы можете!). Вот почему компромисс JSX существует. Вместо того, чтобы написать форму выше Rect.Createelement Звонки, мы можем написать его с синтаксисом, очень похожим на HTML:

// Example 4 - JSX (compare with Example 3)
// https://jscomplete.com/repl?j=SJWy3otHW
const InputForm =
  

    
Enter input and click Search

    
    
  
;
// InputForm "still" uses the Button component, so we need that too.
// Either JSX or normal form would do
function Button (props) {
  // Returns a DOM element here. For example:
  return ;
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

Обратите внимание на несколько вещей приведенных выше:

  • Это не HTML. Например, мы все еще делаем классное значение вместо Класс Отказ
  • Мы все еще рассматриваем, что выглядит как HTML выше как JavaScript. Посмотрите, как я добавил точку запятой в конце.

То, что мы писали выше (пример 4) – это JSX. Тем не менее, то, что мы взяли в браузер, это скомпилированная версия IT (пример 3). Чтобы это произошло, нам нужно использовать предварительный процессор для преобразования версии JSX в Rect.Createelement версия.

Это jsx. Это компромисс, который позволяет нам написать наши компоненты реагирования в синтаксисе, похожий на HTML, что является довольно хорошей сделки.

JSX, кстати, можно использовать самостоятельно. Это не только реагированная вещь.

Фундаментальный # 3: Вы можете использовать выражения JavaScript в любом месте jsx

Внутри раздела JSX вы можете использовать любое выражение JavaScript в паре фигурных скобок.

// To use it:ReactDOM.render(, mountNode);// Example 5 -  Using JavaScript expressions in JSX
// https://jscomplete.com/repl?j=SkNN3oYSW
const RandomValue = () => 
  

    { Math.floor(Math.random() * 100) }
  
;
// To use it:
ReactDOM.render(, mountNode);

Любое выражение JavaScript может пройти внутри этих фигурных скобок. Это эквивалентно $ {} Синтаксис интерполяции в JavaScript Шаблонные литералы Отказ

Это единственное ограничение внутри JSX: только выражения. Так, например, вы не можете использовать обычный Если Заявление, но тройное выражение в порядке.

Переменные JavaScript также являются выражениями, поэтому, когда компонент получает список реквизитов (компонент ranteryValue Protuction не, реквизит Необязательно), вы можете использовать эти реквизиты внутри фигурных скобок. Мы сделали это в Кнопка Компонент выше (пример 1).

Объекты JavaScript также являются выражениями. Иногда мы используем объект JavaScript внутри вьющихся скобок, что делает его как двойные фигурные скобки, но это действительно просто объект внутри вьющихся скобок. Один используемый случай из этого должен пройти объект стиля CSS к специальному Стиль Атрибут в реакции:

// Example 6 - An object passed to the special React style prop
// https://jscomplete.com/repl?j=S1Kw2sFHb
const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// Use it:
ReactDOM.render(
  ,
  mountNode
);

Обратите внимание, как я разрушены только сообщение из аргумента реквизита. Также обратите внимание, как Стиль Атрибут выше – особенный (опять же, это не HTML, он ближе к API DOM). Мы используем объект как значение Стиль атрибут. Этот объект определяет стили, как если бы мы делаем это с JavaScript (потому что мы есть).

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

// Example 7 - Using a React element within {}
// https://jscomplete.com/repl?j=SkTLpjYr-
const MaybeError = ({errorMessage}) =>
  

    {errorMessage && }
  
;
  
// The MaybeError component uses the ErrorDisplay component:
const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// Now we can use the MaybeError component:
ReactDOM.render(
   0.5 ? 'Not good' : ''}
  />,
  mountNode
);

RedeRor Компонент выше только отобразит Errordisplay Компонент, если есть errormessage Строка передана ему и пустой Div Отказ Реагирование считает {правда} , {false} , {undefined} и {NULL} быть действительным элементом детей, которые ничего не делают.

Вы также можете использовать все функциональные методы JavaScript на коллекции ( Map , Уменьшить , Фильтр , Concat и т. Д.) Внутри JSX. Опять же, потому что они возвращают выражения:

// Example 8 - Using an array map inside {}
// https://jscomplete.com/repl?j=SJ29aiYH-
const Doubler = ({value=[1, 2, 3]}) =>
  

    {value.map(e => e * 2)}
  
;
// Use it
ReactDOM.render(, mountNode);

Обратите внимание, как я дал ценность Образуйте значение по умолчанию выше, потому что все просто JavaScript. Обратите внимание, что я выводил выражение массива внутри Div Отказ Реагировать в порядке с этим; Он будет разместить каждое удвоенное значение в текстовом узле.

Фундаментальный # 4: Вы можете написать компоненты реагирования с классами JavaScript

Простые функциональные компоненты отлично подходят для простых потребностей, но иногда нам нужно больше. Реагирование поддерживает создание компонентов через Синтаксис класса JavaScript также. Вот …| Кнопка Компонент (в примере 1), написанный с синтаксисом класса: 

// Example 9 - Creating components using JavaScript classes
// https://jscomplete.com/repl?j=ryjk0iKHb
class Button extends React.Component {
  render() {
    return ;
  }
}
// Use it (same syntax)
ReactDOM.render(, mountNode);

Синтаксис класса прост. Определите класс, который расширяется Ract.component (Еще один верхний уровень API API, которую вам нужно учиться). Класс определяет функцию одного экземпляра Render () И эта функция Render возвращает виртуальный элемент DOM. Каждый раз, когда мы используем Кнопка Компонент на основе класса выше (например, делая <КНОПКА ... />), Rect создать объект из этого классового компонента и использовать этот объект для рендеринга элемента DOM в дереве DOM.

Это причина, по которой мы использовали This.props.label Внутри JSX в визуализированном выходе выше. Поскольку каждый элемент, представленный через компонент класса, получает специальный экземпляр Недвижимость под названием реквизит Это содержит все значения, переданные к этому элементу, когда он был создан.

Поскольку у нас есть экземпляр, связанный с одним применением компонента, мы можем настроить этот экземпляр, как мы желаем. Например, мы можем настроить его после того, как он построен с помощью обычного JavaScript Конструктор Функция:

// Example 10 -  Customizing a component instance
// https://jscomplete.com/repl?j=rko7RsKS-
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.id = Date.now();
  }
  render() {
    return ;
  }
}
// Use it
ReactDOM.render(, mountNode);

Мы также можем определить функции класса и использовать их где угодно, в том числе внутри возвращенного выхода JSX:

// Example 11 — Using class properties
// https://jscomplete.com/repl?j=H1YDCoFSb
class Button extends React.Component {
  clickCounter = 0;
  handleClick = () => {
    console.log(`Clicked: ${++this.clickCounter}`);
  };
  
  render() {
    return (
      
    );
  }
}
// Use it
ReactDOM.render(, mountNode);

Обратите внимание на несколько вещей в примере 11 выше:

  • Handleclick Функция написана с использованием новых предложенных Синтаксис классов-поле в JavaScript. Это все еще на этапе 2, но по многим причинам это лучший вариант для доступа к установленному компоненту экземпляра (благодаря функциям стрелки). Но вам нужно использовать компилятор, такой как Babel, сконфигурированный для понимания этапа 2 (или синтаксис поля класса), чтобы получить код выше для работы. Jscomplete reft имеет предварительно настроен.
  • Мы также определили ClickCounter Переменные экземпляра используют один и тот же синтаксис поля класса. Это позволяет нам пропустить, используя комбинацию класса Constructor.
  • Когда мы указали Handleclick Функция как значение специального OnClick Атрибут реагирования, мы не назвали это. Мы прошли в Ссылка к Handleclick функция. Вызов функции на этом уровне является одним из наиболее распространенных ошибок при работе с реагированием.
// Wrong:
onClick={this.handleClick()}
// Right:
onClick={this.handleClick}

Фундаментальные # 5: События в реакции: два важных различия

При обработке событий внутри элементов React React есть две очень важные различия от того, как мы делаем это с API DOM:

  • Все атрибуты React Elements (включены события) снимаются с использованием камера , а не строчные буквы Отказ Это OnClick , не OnClick Отказ
  • Мы передаем фактическую ссылку на функцию JavaScript в качестве обработчика события, а не строки. Это onclick = { Handleclick } , не OnClick = " handleclick” Отказ

Реагируйте взаимодействуют объект события DOM с собственным объектом для оптимизации производительности обработки событий. Но внутри обработчика событий мы все еще можем получить доступ к всем способам, доступным на объекте DOM Event. Реагируйте пропуски, которые завернули объект события на каждый вызов ручки. Например, чтобы предотвратить форму действий по поводу представления по умолчанию, вы можете сделать:

// Example 12 - Working with wrapped events
// https://jscomplete.com/repl?j=HkIhRoKBb
class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };
  
  render() {
    return (
      

        
      

    );
  }
}
// Use it
ReactDOM.render(
, mountNode);

Фундаментальный # 6: каждый компонент реагирования имеет историю

Следующее относится только к компоненту класса (те, которые расширяют React.comPonent ). Функциональные компоненты имеют немного другой истории.

  1. Во-первых, мы определяем шаблон для реагирования на создание элементов из компонента.
  2. Затем мы проинструктивуем реагируют использовать его где-то. Например, внутри оказывать Вызов другого компонента или с Reactom.runder Отказ
  3. Затем реагировать реагировать элемент и дает ему набор реквизит что мы можем получить доступ к Это .props Отказ Эти реквизиты именно то, что мы прошли на шаге 2 выше.
  4. Так как это все JavaScript, Конструктор Способ будет вызван (если определен). Это первый из того, что мы называем: Методы жизненного цикла компонентов Отказ
  5. Затем реагируйте вычисляют выходной способ рендеринга (виртуальный узел DOM).
  6. Поскольку в первую очередь реагируют реагирование на элемент, отреагируйте взаимодействие с браузером (от нашего имени, используя DOM API) для отображения там элемента. Этот процесс обычно известен как Монтаж Отказ
  7. Реагистрация затем вызывает другой метод жизненного цикла, называемый ComponentDidmount Отказ Мы можем использовать этот метод, например, сделать что-то на доме, который мы теперь знаем, существует в браузере. До этого метода жизненного цикла DOM мы работаем, было все виртуальным.
  8. Некоторые компоненты истории заканчиваются здесь. Другие компоненты размонтируются из браузера DOM по разным причинам. Прямо до последнего случается, Rect вызывает другой метод жизненного цикла, ComponentWillunmount Отказ
  9. Государство любого установленного элемента может измениться. Родитель этого элемента может восстановить. В любом случае установленный элемент может получить другой набор реквизитов. Реагирование магии происходит здесь, и мы на самом деле начнем нуждается в Реагируйте на данный момент! До этого момента нам не нужно вообще реагировать, честно.

История этого компонента продолжается, но до того, как она делает, нам нужно понять это Государство вещь, о которой я говорю.

Фундаментальный # 7: Актуальные компоненты могут иметь частное состояние

Ниже также применимо только к компонентам классов. Я упоминал, что некоторые люди называют компонентами только на презентации тупой ?

Государство Свойство является особенным в любом компонентах Ract Class. Реагирование контролирует каждое состояние компонента для изменений. Но для реагирования на это эффективно делать, мы должны изменить государственное поле через другую вещь API API, которую нам нужно учиться, this.setState :

// Example 13 -  the setState API
// https://jscomplete.com/repl?j=H1fek2KH-
class CounterButton extends React.Component {
  state = {
    clickCounter: 0,
    currentTimestamp: new Date(),
  };
  
  handleClick = () => {
    this.setState((prevState) => {
     return { clickCounter: prevState.clickCounter + 1 };
    });
  };
  
  componentDidMount() {
   setInterval(() => {
     this.setState({ currentTimestamp: new Date() })
    }, 1000);
  }
  
  render() {
    return (
      

        
        
Clicked: {this.state.clickCounter}

        
Time: {this.state.currentTimestamp.toLocaleString()}

      

    );
  }
}
// Use it
ReactDOM.render(, mountNode);

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

Давайте пройдемся по примеру 13, начиная с полей класса. У него есть два из них. Особенный Государство поле инициализируется объектом, который содержит ClickCounter который начинается с 0 и а CurrentTimestamp который начинается с Новая дата () Отказ

Поле второго класса – это Handleclick Функция, которую мы передали на OnClick Событие для элемента кнопки внутри метода рендеринга. Handleclick Метод изменяет этот состоятель экземпляра компонента, используя SetState Отказ Обратите внимание на это.

Другое место, где мы изменяем состояние, находится внутри интервального таймера, который мы начали внутри ComponentDidmount метод жизненного цикла. Он отмечает каждую секунду и выполняет другой звонок в this.setState Отказ

В методе Render мы использовали два свойства, которые мы имеем в состоянии с нормальным синтаксисом чтения. Для этого нет специального API.

Теперь обратите внимание, что мы обновили состояние, используя два разных способа:

  1. Передав функцию, которая вернула объект. Мы сделали это внутри Handleclick функция.
  2. Передавая регулярный объект. Мы сделали это внутри интервала обратного вызова.

Оба направления приемлемы, но первый является предпочтительным при чтении и записи в состояние одновременно (что мы делаем). Внутри интервального обратного вызова мы пишем только государству и не читаем его. В случае сомнений всегда используйте первый синтаксис функции AS-аргумента. Это безопаснее с гоночными условиями, потому что SetState всегда следует рассматривать как асинхронный метод.

Как мы обновляем состояние? Мы возвращаем объект с новым значением того, что мы хотим обновить. Обратите внимание, как в оба призыва к SetState Мы только передаем одну собственность от государственного поля, а не оба. Это совершенно хорошо, потому что SetState на самом деле сливается То, что вы проходите (возвращенное значение аргумента функций) с существующим состоянием. Итак, не указав недвижимость при звонке SetState Значит, мы хотим не изменить это свойство (но не удалять его).

О, #ReaCtjs , если вы так в имен влагосвященные, почему вы назвали его устанавливать, когда вы явно должны назвать его планируемой программировкой

Фундаментальный # 8: Реагистрация реагирует

Реагировать получает свое название от того, что это реагирует к государственным изменениям (хотя и не реактивно, но по расписанию). Была шутка, которая должна быть реагирована по имени Расписание !

Однако то, что мы свидетельствуем с невооруженным глазом, когда состояние любого компонента обновляется, заключается в том, что реагировать реагировать на это обновление и автоматически отражает обновление в браузере DOM (при необходимости).

Подумайте о введении функции рендеринга как:

  • Реквизиты, которые передаются родителем
  • Внутреннее частное состояние, которое может быть обновлено в любое время

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

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

Фундаментальный # 9: React – ваш агент

Вы можете подумать о реагировании как агенту, который мы наняли, чтобы общаться с браузером. Возьмите текущий дисплей Timestamp выше в качестве примера. Вместо того, чтобы мы вручную ходили в браузер и вызовущие операции DOM API, чтобы найти и обновить P # Timestamp Элемент каждую секунду мы только что изменили свойство в состоянии компонента и реагируют на работу с браузером на нашем имени. Я верю, что это правдивая причина, почему Rection популярна. Мы ненавидим разговаривать с мистером браузером (и так много диалектов JOM язык, который он говорит), и реагирует, добровольно делать все разговоры для нас, бесплатно.

Фундаментальный # 10: каждый компонент React имеет историю (часть 2)

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

  1. Компонент может потребоваться восстановить, когда его состояние обновляется или когда его родитель решает изменить реквизиты, которые он передал компонент
  2. Если последний случается, Rect вызывает другой метод жизненного цикла, ComponentWillReceiveProps Отказ
  3. Если либо объект состояния или прошедшие реквизиты изменяются, реагирование имеет важное решение. Если компонент будет обновлен в доме? Вот почему он вызывает еще один важный метод жизненного цикла здесь, должен быть необходим Отказ Этот метод является реальным вопросом, поэтому, если вам нужно настроить или оптимизировать процесс рендера самостоятельно, вы должны ответить на этот вопрос, возвращая либо правда или ложь.
  4. Если нет пользовательских должен быть необходим Указано, реагируйте по умолчанию на очень умную вещь, которая на самом деле достаточно хороша в большинстве ситуаций.
  5. Во-первых, Rect вызывает другой метод жизненного цикла на данный момент, ComponentWillUpdate Отказ Реагирование будет вычислением нового отображения оказанных выходов и сравнить его с последним результатом.
  6. Если отобранный вывод точно такой же, Rect ничего не делает (не нужно говорить с мистером браузером).
  7. Если есть разница, отреагировать это различие в браузер, как мы видели раньше.
  8. В любом случае, поскольку в любом случае произошел процесс обновления (даже если выход был точно такой же), Rect вызывает конечный метод жизненного цикла, ComponentDidupdate Отказ

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

Вот и все. Поверьте, или нет, с тем, что вы узнали выше (или части этого, действительно), вы можете начать создавать некоторые интересные приложения Ractex. Если вы голодны для большего, проверьте мой Узнать React.js by Строительные игры книга!

Благодаря многим читателям, которые рассмотрели и улучшили эту статью, Лукашский Сезвчак, Тим Бройлз, Кайл Холден, Роберт Аксельс, Брюс Лейн, Ирвин Вальдман и Эми Уиллы.

Изучение реагировать или узел? Оформить заказ моих книг:

Читайте ещё по теме: