Реагируйте на собственные API - зачем использовать деструктуризацию только с одним параметром?

Question

Я изучаю JavaScript, React Native и React Navigation. Я только что узнал о разрушении. Это здорово, за исключением того, что я не вижу смысла, когда есть только один параметр. Например, почему бы просто не написать

function HomeScreen( navigation ) { /* same code as below */

вместо

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

Спасибо за любые идеи

Answer 1

Первый аргумент, передаваемый компоненту React, - это объект props, состоящий из всех атрибутов в JSX.

<HomeScreen navigation={...} />

Это будет объект, несмотря ни на что.

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

Answer 2

Обычно функциональные компоненты принимают объект props в качестве инструмента. props может иметь любое количество пар ключ-значение. Например, у вас может быть props.navigation. Но написание function HomeScreen( navigation ) - это не то же самое, что написание function HomeScreen({ navigation }). Запись { navigation } вместо props в аргументе приводит к удалению значения из его родительского объекта. Если вы хотите избежать деструктуризации, вы должны написать это так:

function HomeScreen( props ) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => props.navigation.navigate('Details')}
      />
    </View>
  );
}

Опять же, функциональный компонент реагирует на получение объекта props в качестве аргумента. Мы обычно называем это props, но это может называться как угодно. Этот следующий блок идентичен, мы просто называем props что-то еще:

function HomeScreen( swissArmyKnife ) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => swissArmyKnife .navigation.navigate('Details')}
      />
    </View>
  );
}

Для одного параметра, вы правы, вероятно, нет необходимости деструктурировать. Это просто стенография. Но когда у вас есть объект props с множеством параметров, и вы хотите извлечь из него только определенные значения, это имеет больше смысла. например, скажем, ваш props объект имел параметры navigation, trains, busses, airplanes, bikes, skateboards, и вы просто хотите использовать несколько компонентов:

function HomeScreen( {busses, bikes} ) {
  // do some stuff here with busses and bikes, don't worry about the whole props object
}