Создание компонентов React с использованием только ES5 Особенности

Этот пост будет просто дружественным напоминанием, которое отреагирует «это просто JavaScript». Это нормально использовать его без шага сборки. Можно использовать его, чтобы создать крошечный интерактивный компонент. И вам не нужно использовать ES6 + Если вы не хотите.

Быстрое резюме функции Createleement

React выставляет функцию, называемую Createlement, которая является хлебом и маслом каждого компонента. JSX на самом деле синтаксический сахар, который переводится как React.createElement вызовы Это выглядит примерно так:

React.createElement(
    'tagName',       // HTML tag name or a custom component 
    props,           // HTML attributes, custom properties, events, etc...
    children         // a string or a list of components or almost anything
);

Компоненты без гражданства

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

function Welcome(props) {
    return React.createElement('div', null, 'Hello, ' + props.name);
}

ReactDOM.render(Welcome({ name: 'world' }), container);

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

Эти компоненты могут управлять своим собственным внутренним состоянием и иметь методы жизненного цикла. Вот в чем дело, в ES5 мы не можем использовать класс Ключевое слово для создания компонента, вместо этого придется имитировать это поведение.

Первое, о чем нам нужно позаботиться, это наследство. Обычно вы используете Класс MyComponent Extens React. Компонент сделать это. Мы собираемся пойти на другую дорогу, мы «принудим» наследование, переопределив Прототип Объект нашего компонента с тем, что от Реагировать. Компонент , вот так:

function MyComponent(props) {
    React.Component.constructor.call(this);

    // ... code
}

MyComponent.prototype = Object.create(React.Component.prototype);

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

Пример кода

Теперь с нашими новыми найденными знаниями мы можем создать некоторые компоненты, не настраивая шаг сборки и не беспокоясь о поддержке браузеров. Давайте сделаем простой таймер:

var container   = document.getElementById('app');

// h is short for hyperscript and it makes everything a little bit easier
var h           = React.createElement;

// This is how we inherit methods like setState from React.Component
Timer.prototype = Object.create(React.Component.prototype);

function Timer(props) {
  React.Component.constructor.call(this);
  var self = this;

  self.state = { seconds: 0 };

  self.tick = function() {
    self.setState(function(prevState) {
      return { seconds: prevState.seconds + 1 };
    });
  };

  self.componentDidMount = function() {
    self.interval = setInterval(self.tick, 1000);
  };

  self.componentWillUnmount = function() {
     clearInterval(self.interval);
  };

  self.render = function() {
    return h('div', null, 'seconds: ', self.state.seconds);
  }
}

ReactDOM.render(h(Timer), container);

Заметьте здесь, что я назначаю это контекст в я переменная, чтобы избежать использования связывать Метод прототипа функции. И я использую его повсюду только ради согласованности, хотя я считаю, что это необходимо только в self.tick где я бы потерял это Контекст при его использовании в SetInterval Анкет

Последняя вещь

Сначала люди не замечают, что дети элемента также являются параметрами. Вы можете передать компонент, строку, объект или функцию. В конце дня Дети это опора.

Позволь мне показать тебе что-то.

Вывод

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

Другие источники

Пример списка TODO Пример таймера Реагировать без шага сборки React – это просто JavaScript

Спасибо за чтение. Если вы найдете эту статью полезной и хотите поддержать мои усилия, купить мне кофе ☕ .

Оригинал: “https://dev.to/vonheikemen/creating-react-components-using-only-es5-features-52a1”