wie man die Destrukturierung in reagierenden Komponenten benutzt

Question

Ich habe viel online gelesen und kann einfach keine Destrukturierung in meinen Kopf bekommen, naja.

//before destructuring 
function me(details){ 
    console.log('My name is ' + details.name + ' and I work for ' + details.company); 
} 
//after destructuring 
function me({ name, company }){ 
    console.log('my name is ' + name + ' and i work for ' + company); 
} 

me({ 
    name: 'Rich', 
    age: 34, 
    city: 'London', 
    company: 'Google' 
}) 

Ich habe das geschrieben, und das macht Sinn, aber eine Sache, die ich nicht bekommen, ist die folgende in React.

wenn Sie dies tun:

export default ({ name }) => <h1>Hello {name}!</h1>;

<Hello name="CodeSandbox" />

warum kann ich dies tun:

export default (name) => <h1>Hello {name}!</h1>;

die {} in der Funktionsparameter zu entfernen?

Wenn jemand sieht, was ich falsch mache, können sie das bitte erklären?

im zu Funktionen wie so:

functionA (a) => { // do something with the parameter a } 

nicht sicher über die curlys {} innerhalb der Parameter

Answer 1

export default (name) => <h1>Hello {name}!</h1>; 

für jede Komponente nicht, da funktioniert, gibt es ein Argument nur das ist props

So in seiner längsten Form könnten Sie schreiben

export default (props) => { 
    return <h1>Hello {props.name}!</h1>; 
} 

, die (unter Verwendung von Destrukturierung) verkürzt werden kann als:

export default (props) => { 
    const {name} = props; // Extract name from props using destructuring 
    return <h1>Hello {name}!</h1>; 
} 

, die (unter Verwendung von Destrukturierung auf Parameterebene) verkürzt werden kann als:

export default ({name}) => { // Extract name directly here 
    return <h1>Hello {name}!</h1>; 
} 

die (Entfernen der Funktion kürzbar Körper geschweifte Klammern) wie:

export default ({name}) => <h1>Hello {name}!</h1>;