Я впервые познакомился с концепцией деструктуризации, когда изучал ES6 на Javascript. Я допускаю, что деструктуризация существует во многих кодах других программистов, но, к сожалению, не в моем. В основном это связано с тем, что я привык писать длинный многоуровневый код. «Пока мой проект работает, рефакторинг может подождать».
Чем больше функций мы хотим иметь в нашем приложении, тем больше кода мы будем писать. Папка нашего проекта стала больше, кодовая страница стала длиннее, и я начал искать простоту.
Что такое деструктуризация?
Деструктуризация - это удобный способ одновременного извлечения нескольких ключей из объекта или массива и присвоения значений локальным переменным.
// For Array const arr = ['one!', 'two!', 'three!', 'four!'] const [one, two, ...rest] = arr // What does that mean? const arr = ['one!', 'two!', 'three!', 'four!']; const one = arr[0], two = arr[1], rest = arr.slice(2); // For Object const obj = {a: 'x', b: 'y', c: 'z'} const {a, b, c} = obj // What does that mean? const obj = { a: 'x', b: 'y', c: 'z' }; const a = obj.a, b = obj.b, c = obj.c;
Мы также можем увидеть деструктуризацию массива в React Hooks.
import React from 'react'; const Counter = () => { const [count, setCount] = React.useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) } export default Counter;
Мы также использовали деструктуризацию отдыха для разделения части объекта.
const state = { counter: 1, list: ['a', 'b'] } // rest destructuring const { list, ...rest } = state console.log(rest) // output: { counter: 1 } console.log(list) // output: ['a', 'b']
В React очень часто деструктурируют свойства для передачи дочерним компонентам. При деструктуризации props есть небольшие различия между компонентом класса и функциональным компонентом.
Компонент класса
class MovieCard extends React.Component { render() { return ( <div className="movie-card"> <img src={this.props.posterSrc} alt={this.props.title} /> <h2>{this.props.title}</h2> <small>{this.props.genres.join(', ')}</small> </div> ) } }
В приведенном выше примере у нас есть компонент класса MovieCard. Как видим, мы использовали this.props в нескольких местах. Это действительно СУХОЕ.
После деструктуризации код становится короче и чище. ⬇️
class MovieCard extends React.Component { render() { const {posterSrc, title, genres} = this.props return ( <div className="movie-card"> <img src={posterSrc} alt={title} /> <h2>{title}</h2> <small>{genres.join(', ')}</small> </div> ) } }
Функциональный компонент
// First way const AppComponent = (props) =>{ const { data, loading, loadData } = props /* line above equals: const data = props.data; const loading = props.loadding; const loadData = props.loadData; */ return <div> <AnotherComponent > </div> }
Или вы можете передать в аргументе деструктурированные реквизиты:
// Second wayconst AppComponent = ({ data, loading, loadData }) =>{ …… return <div> <AnotherComponent/> </div> }
// If you have several props, you can write it like this for better readability:
const AppComponent = ({ data, loading, loadData }) =>{ …… return <div> <AnotherComponent/> </div> }
Преимущества деструктуризации
Деструктуризация определенно улучшает читаемость и обеспечивает более короткие строки кода. Это также может дать нам гибкость, так что у нас будет доступ только к нужным нам реквизитам в этом файле. Это также было бы большим подспорьем при отладке.
Я верю, что чистый код - это хороший код. Разрушение и счастливой Реагирования!
Источники:
https://www.robinwieruch.de/javascript-fundamentals-react-requirements#destructuring-in-react
https://www.freecodecamp.org/news / the-basics-of-destructuring-props-in-react-a196696f5477 /? source = post_page ----- b1c295005ce0 ----------------------