Я впервые познакомился с концепцией деструктуризации, когда изучал 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 way
const 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 ----------------------