Kann ich in ES6 mit react ein Objekt nur einmal für die Verwendung in mehreren Methoden destrukturieren?

Question

import React, { Component } from 'react' 
import { connect } from 'react-redux'; 

export default function(strategies = []) { 
    class Authentication extends Component { 
     constructor() { 
      super() 
      this.state = { 
       allGreen: true 
      } 
     } 
     componentWillMount() { 
      const { history } = this.props 
      strategies.map(strategy => { 
       if (!this.props.auth[strategy]) { 
        this.setState({ allGreen: false }) 
        history.replace('/') 
       } 
      }) 
     } 
     componentWillUpdate(nextProps, nextState) { 
      const { history } = this.props 
      strategies.map(strategy => { 
       if (!nextProps.auth[strategy]) { 
        this.setState({ allGreen: false }) 
        history.replace('/') 
       } 
      }) 
     } 
     render() { 
      if (!this.state.allGreen) return (<div></div>) 

      return this.props.children 
     } 
    } 

    function mapStateToProps(state) { 
     return { 
      auth: state.auth 
     } 
    } 

    return connect(mapStateToProps)(Authentication) 
} 

Ich verwende 'destructor Objekt' in der Regel in ES6

Zum Beispiel const {Geschichte} = this.props wie.

aber ich möchte wissen, ob es eine effiziente Art und Weise ist nur ein Objekt der Zerstörung zu haben, und verwenden Sie es in allen Verfahren der Komponente. (ComponentWillMount, componentWillUpdate ...)

Bild oben, benutzte ich Objekt zweimalige Zerstörung in der ComponentWillMount-Methode und ComponentWillUpdate-Methode. (const {history} = this.props)

Ich möchte Objekt nur einmal zerstören! Gibt es eine Lösung?

Answer 1

Es gibt keine Leistungseinbußen bei der Verwendung von Destrukturierung mehrmals (Sie erweitern nicht das gesamte Objekt, wenn dies Ihre Angst ist).

Ein ES 6 Code wie ::

const aaa = { 
    a: 5, 
    b: 'ffff' 
} 

const { bbb } = aaa; 

... zu übersetzt ...

var aaa = { 
    a: 5, 
    b: 'ffff' 
}; 

var bbb = aaa.bbb; 

Versuchen Sie es zu https://babeljs.io

es also verwenden oder einfach this.props.history verwenden