Как обрабатывать события в React приложении

В JSX нам нужно обернуть выражения JavaScript фигурными скобками { }. Обычный JavaScript:

<button onclick="hitMe()">hit me</button>

В ReactJS:

<button onClick={hitMe}>hitme</button>

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

Функциональные компоненты

function Button() {
  function handleClick() {
    alert('some one clicked me')
  }
  
  return (
    <button onClick={handleClick}>Click me</button>
  )
}

В React нам нужно передать функцию обработчика событий.

Передача аргументов

Мы также можем передавать аргументы в функции обработчика событий, подобные этой.

function Button() {
  function handleClick(name) {
     alert(name)
  }

  return (
    <button onClick={()=>handleClick('react')}>Click me</button>
  )
}

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

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  handleInc(){
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc.bind(this)}>Increment</button>
      </div>
    )
  }
}

В компонентах на основе классов нам нужно привязать this к классу, иначе this будет привязано к global window object или в строгом режиме this будет undefined. Мы можем решить эту проблему с помощью стрелочных функций, потому что в стрелочных функциях this будет привязано к его внешнему контексту выполнения. Давайте модифицируем приведенный выше компонент с помощью стрелочных функций.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  handleInc() {
    this.setState({
      num: this.state.num+1
    })
  }

  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={()=>this.handleInc()}>Increment</button>
      </div>
    )
  }
}

Второй способ использования class fields syntax

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }

  // стрелочная функция
  handleInc = () => {
    this.setState({
      num: this.state.num+1
    })
  }

  render() {
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc}>Increment</button>
      </div>
    )
  }
}

Объект события

Мы также можем использовать объект события таким образом в react.

function Link(){

  function handleClick(e){
     console.log(e);
     e.preventDefault();
  }

  return (
      <a href="#" onClick={handleClick} >Click me</a>
  )
}

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

1. Запуск рендера (доставка заказа гостя на кухню)
2. Рендер компонента (подготовка заказа на кухне)
3. Фиксация (commit) в DOM (размещение заказа на столе)

Шаг 1. Запуск рендеринга

Есть две причины для рендеринга компонента:

• Это начальный рендер компонента.
• Состояние компонента (или одного из его предков) было обновлено.

Начальный рендер

Когда ваше приложение запускается, вам нужно запустить первоначальный рендеринг. Фреймворки и песочницы иногда скрывают этот код, но это делается путем вызова createRoot с целевым узлом DOM, а затем вызова его метода рендеринга с вашим компонентом:

// index.js

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<Image />);

// Image.js

export default function Image() {
  return <img src="https://example.com/image.jpg" alt="image" />;
}

Рендеринг при обновлении состояния

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

Шаг 2: React визуализирует ваши компоненты

После запуска рендеринга React вызывает ваши компоненты, чтобы выяснить, что отображать на экране. «Рендеринг» — это React, вызывающий ваши компоненты.

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

Этот процесс является рекурсивным: если обновленный компонент возвращает какой-то другой компонент, React отрисовывает этот компонент следующим, а если этот компонент также что-то возвращает, он отрисовывает этот компонент следующим и так далее. Процесс будет продолжаться до тех пор, пока не останется вложенных компонентов и React точно не будет знать, что должно отображаться на экране. В следующем примере React вызовет Gallery() и Image() несколько раз:

// Gallery.js

export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

function Image() {
  return <img src="https://example.com/image.jpg" alt="image" />;
}

// index.js

import Gallery from './Gallery.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<Gallery />);

• Во время первоначального рендеринга React создаст узлы DOM для тегов <section>, <h1> и трех тегов <img>.
• Во время повторного рендеринга React вычислит, какие из их пропсов, если таковые имеются, изменились с момента предыдущего рендеринга. Он ничего не будет делать с этой информацией до следующего шага, фазы фиксации.

Рендеринг всегда должен быть чистым:

• При тех же входах, тот же выход. При одинаковых входных данных компонент всегда должен возвращать один и тот же JSX. (Когда кто-то заказывает салат с помидорами, он не должен получать салат с луком.)
• Он думает только о своих делах. Он не должен изменять какие-либо объекты или переменные, существовавшие до рендеринга. (Один заказ не должен изменять чей-либо другой заказ.)

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

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

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

Шаг 3: React фиксирует изменения в DOM

После рендеринга (вызова) ваших компонентов React изменит DOM.

• Для начального рендеринга React будет использовать DOM API appendChild() для размещения на экране всех созданных DOM-узлов.
• Для повторного рендеринга React применит минимально необходимые операции (рассчитанные во время рендеринга), чтобы привести DOM в соответствие с последним результатом рендеринга.

React изменяет DOM узлы только в том случае, если между рендерами есть разница. Например, вот компонент, который каждую секунду перерисовывается с разными пропсами, переданными от его родителя. Обратите внимание, как вы можете добавить некоторый текст в <input>, обновив его значение, но текст не исчезнет при повторном рендеринге компонента:

// Clock.js

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

Это работает, потому что на этом последнем шаге React только обновляет содержимое <h1> новым значением времени. Он видит, что <input> появляется в JSX в том же месте, что и в прошлый раз, поэтому React не касается <input> или его значения.

Отрисовка браузером

После того, как рендеринг завершен и React обновил DOM, браузер перерисует экран. Хотя этот процесс известен как "рендеринг в браузере", мы будем называть его "отрисовкой", чтобы избежать путаницы в остальной части этого руководства.

Резюме

Любое обновление экрана в приложении React происходит в три этапа:

• Запуск
• Рендеринг
• Фиксация

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