Передача данных без реквизита на функциональный компонент?

Question

Привет, ребята,

Я относительно новичок в реагирующих хуках, и в свое время (год назад), когда я проходил через реквизиткомпонент, я бы затем использовал их с "props.something."

Теперь я сделал "список задач", и я могу использовать свои реквизиты по-другому, ссылаясь на реквизиты вобъект в параметре:

const Form = ({addTodo}) => {addTodo (x)}

Что это? Почему мы больше не используем this.props, почему в параметре объект ? Старый способ прохождения реквизита мертв ? Это из-за реакции Крючки ?

Чтобы проиллюстрировать мой пример, здесь два компонента разговаривают друг с другом.

Первый:

import React, {useState} from 'react';
import Form from './Form';


const Affichage = () => {

    const [todos, setTodos] = useState([
        '1',
        '2',
        '3',
        '4'
    ])

    const addTodo = text => {
        const newTodos = [...todos, text];
        setTodos(newTodos)
    }

    return (
        <div>
            <Form addTodo={addTodo} />
            <ul>
                {todos.map((item, index) =>{
                    return(
                        <li key={index}>
                            {item}
                        </li>
                    )
                })}
            </ul>
        </div>
    )

}

export default Affichage;`

Второй:

import React, {useState} from 'react';


const Form = ({ addTodo }) => {

    const [value, setValue] = useState('');

    const handleSubmit = e => {
        e.preventDefault();
        // console.log(value);
        addTodo(value);

    }


    return(
        <form onSubmit={handleSubmit}>

            <input type="text" onChange={e => setValue(e.target.value)}/>
            <button>Envoyer</button>

        </form>
    )

}

export default Form;

Если бы кто-нибудь, проходящий мимо, мог меня осветить, это было бы здорово ☺

Answer 1

Ничего не изменилось. Это просто ярлык для destructuring

const Component = props =>{
    const { foo } = props
}

Это эквивалент

const Component = ({ foo }) =>{

}