Изучите основы деструктуризации реквизитов в React

1656627248 izuchite osnovy destrukturizaczii rekvizitov v react

от Эвелин Чен

pPG6THcM7ENK4gk0Jy9xcmbEEmaM2VERA49x

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

Я некоторое время уходил от этого, руководствуясь предпосылкой «если он не сломался, не исправляйте его», но недавно мне понравилась его простота и тот факт, что это становится нормой в JavaScript.

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

Причины деструктуризации

Улучшает читабельность

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

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

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

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

Более короткие строки кода

Перед ES6 см. следующее:

var object = { one: 1, two: 2, three: 3 }
var one = object.one;var two = object.two;var three = object.three
console.log(one, two, three) // prints 1, 2, 3

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

В следующем примере мы фактически сократили количество строк до двух:

let object = { one: 1, two: 2, three: 3 }
let { one, two, three } = object;
console.log(one, two, three) // prints 1, 2, 3

Синтаксический сахар

Благодаря этому код выглядит более приятным, лаконичным и словно его написал кто-то, кто знает, что делает. Я кое-что повторяю первый пункт здесь, но опять же, если это улучшает читабельность, почему бы вам этого не сделать?

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

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

Давайте рассмотрим родительский компонент в нашей программе:

import React, { Component } from 'react';
class Properties extends Component {  constructor() {    super();    this.properties = [      {        title: 'Modern Loft',        type: 'Studio',        location: {          city: 'San Francisco',          state: 'CA',          country: 'USA'        }      },      {        title: 'Spacious 2 Bedroom',        type: 'Condo',        location: {          city: 'Los Angeles',          state: 'CA',          country: 'USA'        }      },    ];  }
render() {    return (      <div>        <Listing listing={this.properties[0]} />        <Listing listing={this.properties[1]} />      </div>    );  }}

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

В этом примере мы хотим передать a listing объект из нашего массива свойств для воспроизведения дочернего компонента.

Вот как будет выглядеть функциональный компонент:

const Listing = (props) => (  <div>    <p>Title: {props.listing.title}</p>    <p>Type: {props.listing.type}</p>    <p>      Location: {props.listing.location.city},      {props.listing.location.state},      {props.listing.location.country}    </p>  </div>);

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

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

const Listing = ({ listing }) => (  <div>    <p>Title: {listing.title}</p>    <p>Type: {listing.type}</p>    <p>      Location: {listing.location.city},      {listing.location.state},      {listing.location.country}    </p>  </div>);

Еще лучше мы можем дополнительно деструктурировать вложенные объекты, как показано ниже:

const Listing = ({  listing: {    title,    type,    location: {      city,      state,      country    }  }}) => (  <div>    <p>Title: {title}</p>    <p>Type: {type}</p>    <p>Location: {city}, {state}, {country}</p>  </div>);

Вы видите, как это легче читать? В этом примере мы деструктурировали оба listings и ключи внутри listing.

Обычной проблемой является деструктурирование только ключей, как мы делаем ниже, и попытка получить доступ к объекту:

{ location: { city, state, country } }

В этом случае мы не сможем получить доступ к location объект через переменную с именем location.

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

{ location, location: { city, state, country } }

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

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

Идея почти такая же в компонентах класса, но исполнение несколько иное.

Посмотрите ниже:

import React, { Component } from 'react';
class Listing extends Component {  render() {    const {      listing: {        title,        type,        location: {          city,          state,          country        }      }    } = this.props;
return (      <div>        <p>Title: {title}</p>        <p>Type: {type}</p>        <p>          Location: {city}, {state}, {country}        </p>      </div>    )  }}

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

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

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

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

Спасибо, что прочли! Если это помогло вам, пожалуйста, хлопайте и/или поделитесь этой статьей, чтобы она также могла помочь другим! 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.