Пример деструктуризации

Когда я впервые увидел такую ​​фигуру внизу на параметре функции, мне было трудно догадаться, что она означает. Это означало сократить длину кода с «props.song» до «song», не используя «props».

function foo({song}) {
...
}

До :

import React from 'react';
import { connect } from 'react-redux';

const SongDetail = props => {
  if (!props.song) {
  return <div>Select a song!</div>
  }
  return <div>{props.song.title}</div>;
};

const mapStateToProps = (state) => {
  return { song: state.selectedSong}
};

export default connect(mapStateToProps)(SongDetail);

После :

import React from 'react';
import { connect } from 'react-redux';

const SongDetail = ({song}) => {
  if (!song) {
  return <div>Select a song!</div>
  }
  return <div>{song.title}</div>;
};

const mapStateToProps = (state) => {
return { song: state.selectedSong}
};

export default connect(mapStateToProps)(SongDetail);

Ссылка :

  1. https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

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