Destrukturierung Variablen Performance

Question

Gibt es einen Unterschied in der Leistung, wenn überhaupt, zwischen dem Schreiben

const color = props.color; 

vs

const { color } = props; 

---

Auch tun wir gewinnen oder jede Leistung verlieren, wenn wir in den Parametern destrukturiert Unterschrift? Siehe Beispiel 3

Ich nehme Beispiel3 in dieser Situation wäre der beste Weg, um die Funktion zu schreiben?

---

Beispiel funktionelle reagieren Komponenten:

const example1 = (props) => { 
    const color = props.color; 
    // I know I could also just write style={{ color: props.color }} 
    // but for arguments sake lets say I want to write it like this. 
    return <h1 style={{ color }}>Hello</h1>; 
}; 

const example2 = (props) => { 
    const { color } = props; 
    return <h1 style={{ color }}>Hello</h1>; 
}; 

const example3 = ({ color }) => { 
    return <h1 style={{ color }}>Hello</h1>; 
}; 

Answer 1

Es wird keine Performance-Probleme haben, wie Ihr Code/minify kompiliert werden und so weiter.

Beachten Sie, dass mit Reaktion, wird Ihr Code transpiled werden, die das gleiche tun wie

const color = props.color

Überprüfen Sie das Ergebnis auf dem babel compiler online tester