EmberJs 弃用组件生命周期钩子 didReceiveAttrs

Question

对于 Ember 版本 2.16，他们删除了传递给 didReceiveAttrs 组件生命周期挂钩的参数。以前我以对象的形式获取参数。

newAttrs:

EmptyObject: 
{
  dataTestId: "test-object"
  items: MutableCell {__MUTABLE_CELL__       [id=__ember1555539649631463096066386]: true, __REF__ [id=__ember1555539649631670217952659]: RootPropertyReference, value: Array(27)}
  prompt: SafeString {string: "Select an Initiator Group"}
  required: true
  selected: MutableCell {__MUTABLE_CELL__ [id=__ember1555539649631463096066386]: true, __REF__ [id=__ember1555539649631670217952659]: RootPropertyReference, value: undefined}
  __proto__: Object
}

弃用后如何在 didReceiveAttrs 中获取这样的对象？

Answer 1

呃，这是 2.12 中添加的弃用。在 2.13.0.

之前，您可以在组件生命周期挂钩中获取参数

2.13.0 之后在钩子中获取参数的另一种方法如下，

之前：

didReceiveAttrs({ oldAttrs, newAttrs }) {
  if (oldAttrs.temp !== newAttrs.temp) {
    this.thermometer.move({ from: oldAttrs.temp, to: newAttrs.temp });
  }
}

之后：

didReceiveAttrs() {
  let oldTemp = this.get('_oldTemp');
  let newTemp = this.get('temp');

  if (oldTemp && oldTemp !== newTemp) {
    this.thermometer.move({ from: oldTemp, to: newTemp });
  }
  this.set('_oldTemp', newTemp);
}

您可以从官方获取更多信息deprecation guide

Answer 2

有 ember 插件可以提供更改的属性，

https://github.com/workmanw/ember-diff-attrs

Shorthand 用法：

import diffAttrs from 'ember-diff-attrs';

export default Ember.Component.extend({
  didReceiveAttrs: diffAttrs('email', 'isAdmin', function(changedAttrs, ...args) {
    this._super(...args);

    if(changedAttrs && changedAttrs.email) {
      let oldEmail = changedAttrs.email[0],
          newEmail = changedAttrs.email[1];
      // Do stuff
    }
  })
});

扩展用法：

import diffAttrs from 'ember-diff-attrs';

export default Ember.Component.extend({
  didReceiveAttrs: diffAttrs({
    keys: ['user', 'isAdmin'],
    isEqual(key, a, b) {
      if (key === 'user') {
        return (a && b) ? a.id === b.id : a === b;
      }
      return a === b;
    },
    hook(changedAttrs, ...args) {
      this._super(...args);

      if(changedAttrs && changedAttrs.user) {
        let oldUser = changedAttrs.user[0],
            newUser = changedAttrs.user[1];
        // Do stuff
      }
    }
  })
});

EmberJs 弃用组件生命周期钩子 didReceiveAttrs

EmberJs deprecate component lifecycle hook didReceiveAttrs

javascript

object

deprecated

ember.js

ember-cli