Question

当我发现自己在class ViewController: UIViewController { @IBOutlet weak var airplayView: MPVolumeView! override func viewDidLoad() { super.viewDidLoad() airplayView.showsRouteButton = true airplayView.showsVolumeSlider = false airplayView.setRouteButtonImage(UIImage(named: "airplay"), for: .normal) for view in airplayView.subviews { if let button = view as? UIButton { button.imageView?.contentMode = .scaleAspectFit button.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.bottom, relatedBy: NSLayoutConstraint.Relation.equal, toItem: airplayView, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1, constant: 0).isActive = true NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: airplayView, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: 0).isActive = true NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: airplayView, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1, constant: 0).isActive = true NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.leading, relatedBy: NSLayoutConstraint.Relation.equal, toItem: airplayView, attribute: NSLayoutConstraint.Attribute.leading, multiplier: 1, constant: 0).isActive = true } } } } props中多次使用相同的react时（例如在组件上的不同方法中），我最终破坏了component

这是不好的做法吗？我是否应该将多次解构的props分配给实例本身（类似于prop中的this.propOfInterest = this.props.propOfInterest？

constructor()

Answer 1

解构不是一个坏习惯，它不会以任何方式降低性能。在后台，无论您是否进行销毁，Babel都将在捆绑之前将您的代码转换为同一条语句。

基本上，

const { propOfInterest } = this.props;

和

const propOfInterest = this.props.propOfInterest;

将以相同的方式捆绑。

如果将这两行复制到online Babel transpiler中，将会得到这些结果。

const { propOfInterest } = props;
const propInterest = props.propInterest;

将导致

var _props = props,
    propOfInterest = _props.propOfInterest;
var propInterest = props.propInterest;

关于性能，在您使用this时，它就成为一个实例变量。根据 Nicholas Zakas 在他的书《 高性能JavaScript 》中，理想情况下实例变量在性能上要慢一些。

涉及Javascript数据时，几乎有四种访问方法：文字值，变量，对象属性和数组项。考虑优化时，文字值和变量的性能大致相同，并且比对象属性和数组项快得多。

因此，无论何时多次引用对象属性或数组项，都可以通过定义变量来提高性能。（这适用于读取和写入数据。）

从作者的角度得出结论，解构比将值存储在实例变量中要快得多。

如果我们可以创建一个jsperf示例，那么我们肯定会知道。

在React组件中多次破坏道具？

1 个答案: