Что означает ({}) при написании функции в reactjs

Question

import React from 'react'
import PropTypes from 'prop-types'

const Todo = ( {onClick, completed, text} ) =>(
    <li 
    onClick ={onClick}
    style = {{
        textDecoration: completed ? 'line-through' : 'none'
    }}
    >
    { text }
    </li>
)

Todo.propTypes = {
    onClick:PropTypes.func.isRequired,
    completed:PropTypes.bool.isRequired,
    text:PropTypes.string.isRequired
}

export default Todo

1) Я встретил код для Todo в OfficalDocumention

2) Я был перепутан с const Todo = ( {onClick, completed, text}) эти части

3) Используем ли мы деструктив (es6 синтаксис) или мы передаем тип объекта, используя json short Hand Синтаксис

Answer 1

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

Это не ограничивается функциональными компонентами. Рассмотрим следующую функцию:

cont myObj = {
  val: 'foo',
  other: 'bar'
}

function myFunction({ val, other }) => {
  return val + other;
}

myFunction(myObj); // foobar

Это способ более явно объявить требования к параметрам функции при использовании объекта в качестве аргумента, а также назначить их переменным, чтобы вам не приходилось ссылаться на каждый из них. один как myObj.val или myObj.other.

Таким образом, эквивалент функционального компонента будет:

<MyComponent val="foo" other="bar" />

// Underneath react still calls our functional component like this
// where props is an object containing val and other
MyComponent(props) 

const MyComponent = ({val, other}) => {...}