12.12.2019 в 13:44

Как написать чистый и понятный код React с использованием синтаксиса свойств класса

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

Посмотрите на приведенный ниже код

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.handleAddOne = this.handleAddOne.bind(this);
  }
  handleAddOne() {
    this.setState(prevState => {
      return {
        counter: prevState.counter + 1
      };
    });
  }
  render() {
    return (
      
        Counter: {this.state.counter}
        
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Здесь у нас есть counter, установленный как ноль. Мы также добавили обработчик событий, который увеличивает значение счетчика на единицу, когда мы нажимаем кнопку «Add One».

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

this.handleAddOne = this.handleAddOne.bind(this);

Кроме того, просто для объявления состояния мы должны создать конструктор, добавить в него вызов super и затем мы можем объявить состояние. Это не только громоздко, но и делает код довольно сложным.

По мере увеличения числа обработчиков событий количество вызовов .bind также увеличивается. Мы можем перестать делать это, используя синтаксис свойств класса.

Итак, давайте рассмотрим другой подход.

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

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

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

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  state = {
    counter: 0
  };
  handleAddOne = () => {
    this.setState(prevState => {
      return {
        counter: prevState.counter + 1
      };
    });
  };
  render() {
    return (
      
        Counter: {this.state.counter}
        
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Как вы можете видеть, мы переместили объявление состояния из конструктора непосредственно в класс, что сделает state свойством класса.

Также мы преобразовали обработчик события handleAddOne. Итак, в конце мы полностью избавились от необходимости добавления конструктора, который сделает наш код чистым и понятным.

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

Установка:

1. create-react-app имеет встроенную поддержку, поэтому вы можете напрямую использовать этот новый синтаксис без какой-либо настройки.

2. Если вы используете собственную настройку веб-пакета и используете babel 7, добавьте поддержку синтаксиса свойств класса, используя:

npm install --save-dev @babel/plugin-proposal-class-properties

Также добавьте, @babel/plugin-proposal-class-properties в массив плагинов в файле .babelrc, как показано ниже

{
 "plugins": ["@babel/plugin-proposal-class-properties"]
}

И вы готовы работать с этим новым синтаксисом

#React

279

Войти на сайт

Как написать чистый и понятный код React с использованием синтаксиса свойств класса

Установка: