Пример деструктуризации
Когда я впервые увидел такую фигуру внизу на параметре функции, мне было трудно догадаться, что она означает. Это означало сократить длину кода с «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);
Ссылка :
- https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Я пишу в блог то, что узнал позже, чтобы найти здесь для себя. Если вам довелось прочитать это дерьмо и там есть неверная информация, было бы полезно добавить комментарий нижеw.