Советы по React - Чистый синтаксис

React - это наиболее используемая интерфейсная библиотека для создания современных интерактивных интерфейсных веб-приложений. Его также можно использовать для создания мобильных приложений.

В этой статье мы рассмотрим, как правильно писать компоненты React.

Переключение компонентов

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

import React from "react";
const Foo = () => <p>foo</p>;
const Bar = () => <p>bar</p>;
export default function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <>
      <div>
        <button onClick={() => setToggle(toggle => !toggle)}>Toggle</button>
        {toggle ? <Foo /> : <Bar />}
      </div>
    </>
  );
}

В приведенном выше коде у нас есть компоненты Foo и Bar, между которыми мы хотим переключаться. Для этого мы использовали тернарное выражение в следующем коде:

{toggle ? <Foo /> : <Bar />}

Приведенный выше код возвращает Foo или Bar с учетом значения toggle. Поэтому, когда мы нажимаем кнопку Toggle, вызывается метод setToggle, а затем React отображает Foo или Bar в зависимости от того, является ли toggle true или нет.

Если мы хотим включать и выключать один компонент, мы можем написать следующий код:

import React from "react";
const Foo = () => <p>foo</p>;
export default function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <>
      <div>
        <button onClick={() => setToggle(toggle => !toggle)}>Toggle</button>
        {toggle ? <Foo /> : undefined}
      </div>
    </>
  );
}

Мы можем поместить null или undefined в JSX, если не хотим ничего отображать. Также мы можем написать:

import React from "react";
const Foo = () => <p>foo</p>;
export default function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <>
      <div>
        <button onClick={() => setToggle(toggle => !toggle)}>Toggle</button>
        {toggle && <Foo />}
      </div>
    </>
  );
}

В приведенном выше коде мы использовали оператор &&, чтобы показать Foo только тогда, когда toggle равно true.

Разрушение свойств и состояния

Деструктуризация свойств и состояния - это здорово, потому что мы можем выборочно выбирать, какие свойства и состояние отображать в соответствии с нашими предпочтениями.

Мы можем деструктурировать props, написав следующее для функциональных компонентов:

import React from "react";
const Person = ({ firstName, lastName, age }) => (
  <p>
    {firstName} {lastName} {age}
  </p>
);
export default function App() {
  return (
    <>
      <div>
        <Person firstName="Jane" lastName="Smith" age={20} />
      </div>
    </>
  );
}

В приведенном выше коде мы передаем свойства firstName, lastName и age в Person, затем мы использовали синтаксис деструктуризации в параметре Person, чтобы извлечь свойства из параметров.

Таким образом, мы видим:

Jane Smith 20

отображается на экране, когда мы передаем реквизиты в App и рендерим их в Person.

Для компонентов класса мы можем деструктурировать свойства и указать следующее:

import React from "react";
class Person extends React.Component {
  render() {
    const { firstName, lastName, age } = this.props;
    return (
      <p>
        {firstName} {lastName} {age}
      </p>
    );
  }
}
export default function App() {
  return (
    <>
      <div>
        <Person firstName="Jane" lastName="Smith" age={20} />
      </div>
    </>
  );
}

В приведенном выше коде у нас есть компонент класса Person, который имеет метод render. Мы получаем доступ к реквизитам с помощью this.props, а затем деструктурируем свойства this.props в их собственные переменные.

Затем мы отображаем их в элементе p. Таким образом, мы получим тот же результат, что и раньше.

Точно так же мы можем деструктурировать состояния следующим образом:

import React from "react";
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posCount: 0,
      negCount: 0
    };
  }
  render() {
    const { posCount, negCount } = this.state;
    return (
      <div>
        <button
          onClick={() => this.setState(count => ({ posCount: posCount + 1 }))}
        >
          Increment
        </button>
        <button
          onClick={() => this.setState(count => ({ negCount: negCount - 1 }))}
        >
          Decrement
        </button>
        <p>{posCount}</p>
        <p>{negCount}</p>
      </div>
    );
  }
}

В приведенном выше коде у нас есть состояния posCount и negCount. Затем у нас есть 2 обработчика событий для установки состояния posCount и negCount соответственно. Затем мы отображаем их в тегах p.

Поскольку мы деструктурировали this.state в первой строке render метода, мы можем получить к ним доступ, не ссылаясь на this.state в каждой строке, что сэкономило нам много времени на набор текста и сделало код намного чище.

Заключение

Мы можем переключать компоненты с помощью тернарного выражения, если мы хотим переключаться между двумя компонентами. Если мы хотим включать и выключать один компонент, мы можем использовать оператор &&.

Кроме того, мы должны деструктурировать наши реквизиты и состояния, чтобы нам не приходилось постоянно ссылаться на props, this.props или this.state, и сделать наш код чище, и мы также можем меньше печатать.