在带有 react 的 ES6 中,我可以只解构一次对象以用于多种方法吗?

In ES6 with react, can I destructure an object just once for use in multiple methods?

提问人:nujabes 提问时间:2/20/2017 最后编辑:Pekkanujabes 更新时间:2/20/2017 访问量:2309

问:

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)
}

我通常在 ES6 中使用“析构函数对象”

例如,const { history } = this.props like。

但是,我想知道是否有一种有效的方法可以只销毁一个对象,并在所有组件的方法中使用它。(componentWillMount, componentWillUpdate ...)

上图中,我在 componentWillMount 方法和 componentWillUpdate 方法中使用了两次对象销毁。( const { history } = this.props )

我只想破坏一次物体!有什么解决办法吗?

JavaScript reactjs ecmascript-6 redux es6 类

评论

0赞 evolutionxbox 2/20/2017
您可以将示例javascript作为文本而不是图像发布吗?
0赞 nujabes 2/20/2017
@evolutionxbox当然
5赞 Pekka 2/20/2017
你的意思是解构,而不是破坏,对吗?
0赞 nujabes 2/20/2017
@Pekka웃 我不知道确切的术语,我的意思是像 const { history } = this.props 这样的动作
0赞 Icepickle 2/20/2017
是的,创建一个方法,并像那样得到它,那么你只需要在 1 个地方更改它,以防这个道具发生变化getHistory()

答:

4赞 keul 2/20/2017 #1

多次使用解构没有性能问题(如果这是你的恐惧,你不会扩展整个对象)。

ES 6 代码如下:

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

const { bbb } = aaa;

...被翻译为...

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

var bbb = aaa.bbb;

尝试一下 https://babeljs.io

所以使用它,或者干脆使用this.props.history

评论

0赞 nujabes 2/20/2017
好的,谢谢你。我只是不想写两次相同的描述..似乎我别无选择:)