Ember组件生命周期 #

创建 → 运行 → 销毁

┌─────────────────────────────────────────────────┐
│                  组件生命周期                     │
├─────────────────────────────────────────────────┤
│                                                 │
│   constructor()                                 │
│        │                                        │
│        ▼                                        │
│   ┌─────────────────┐                          │
│   │  willRender()   │ ← 可选                   │
│   └─────────────────┘                          │
│        │                                        │
│        ▼                                        │
│   ┌─────────────────┐                          │
│   │     渲染        │                          │
│   └─────────────────┘                          │
│        │                                        │
│        ▼                                        │
│   ┌─────────────────┐                          │
│   │  didRender()    │ ← 可选                   │
│   └─────────────────┘                          │
│        │                                        │
│        ▼                                        │
│   ┌─────────────────┐                          │
│   │    运行中        │ ← 状态更新触发重新渲染    │
│   └─────────────────┘                          │
│        │                                        │
│        ▼                                        │
│   willDestroy()                                 │
│                                                 │
└─────────────────────────────────────────────────┘

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { assert } from '@ember/debug';

export default class UserCardComponent extends Component {
  @tracked isExpanded = false;

  constructor(owner, args) {
    super(owner, args);

    // 参数验证
    assert('user is required', this.args.user);

    // 初始化状态
    this.isExpanded = this.args.initiallyExpanded ?? false;

    console.log('组件创建');
  }
}

export default class MyComponent extends Component {
  constructor(owner, args) {
    super(owner, args);

    // 可以访问args
    console.log(this.args.title);

    // 不能访问DOM
    // this.element // undefined
  }
}

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class TimerComponent extends Component {
  intervalId;

  constructor(owner, args) {
    super(owner, args);
    this.startTimer();
  }

  startTimer() {
    this.intervalId = setInterval(() => {
      console.log('tick');
    }, 1000);
  }

  willDestroy() {
    // 清理资源
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    super.willDestroy(...arguments);
  }
}

export default class ResizeComponent extends Component {
  @tracked width = window.innerWidth;

  constructor(owner, args) {
    super(owner, args);
    window.addEventListener('resize', this.handleResize);
  }

  willDestroy() {
    window.removeEventListener('resize', this.handleResize);
    super.willDestroy(...arguments);
  }

  @action
  handleResize() {
    this.width = window.innerWidth;
  }
}

import Component from '@glimmer/component';

export default class LoggerComponent extends Component {
  willRender() {
    console.log('即将渲染');
  }
}

import Component from '@glimmer/component';

export default class FocusComponent extends Component {
  didRender() {
    // DOM已可用
    const input = document.querySelector('#my-input');
    if (input && this.args.autoFocus) {
      input.focus();
    }
  }
}

// app/modifiers/autofocus.js
import { modifier } from 'ember-modifier';

export default modifier(function autofocus(element, [condition = true]) {
  if (condition) {
    element.focus();
  }
});

<input {{autofocus @shouldFocus}} />

ember install ember-resources

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { resource } from 'ember-resources';

export default class UserProfileComponent extends Component {
  userData = resource(this, async () => {
    const response = await fetch(`/api/users/${this.args.userId}`);
    return response.json();
  });

  get user() {
    return this.userData.value;
  }
}

import { resource } from 'ember-resources';

export const RemoteData = resource(({ on }, url) => {
  const controller = new AbortController();

  on.cleanup(() => controller.abort());

  return fetch(url, { signal: controller.signal }).then((r) => r.json());
});

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class NotificationComponent extends Component {
  @service notifications;

  constructor(owner, args) {
    super(owner, args);
    this.notifications.subscribe(this.handleNotification);
  }

  willDestroy() {
    this.notifications.unsubscribe(this.handleNotification);
    super.willDestroy(...arguments);
  }

  @action
  handleNotification(notification) {
    // 处理通知
  }
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { later, cancel } from '@ember/runloop';

export default class CountdownComponent extends Component {
  @tracked seconds = this.args.duration;
  timer;

  constructor(owner, args) {
    super(owner, args);
    this.startCountdown();
  }

  startCountdown() {
    this.timer = later(() => {
      if (this.seconds > 0) {
        this.seconds--;
        this.startCountdown();
      }
    }, 1000);
  }

  willDestroy() {
    cancel(this.timer);
    super.willDestroy(...arguments);
  }
}

import Component from '@glimmer/component';
import Chart from 'chart.js/auto';

export default class ChartComponent extends Component {
  chart;

  didRender() {
    const canvas = document.getElementById('myChart');
    if (canvas && !this.chart) {
      this.chart = new Chart(canvas, {
        type: 'line',
        data: this.args.data,
        options: this.args.options,
      });
    } else if (this.chart) {
      this.chart.data = this.args.data;
      this.chart.update();
    }
  }

  willDestroy() {
    if (this.chart) {
      this.chart.destroy();
    }
    super.willDestroy(...arguments);
  }
}

// Classic组件
import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.$('input').focus();
  },

  willDestroyElement() {
    this._super(...arguments);
    this.cleanup();
  },
});

// Glimmer组件
import Component from '@glimmer/component';

export default class MyComponent extends Component {
  willDestroy() {
    this.cleanup();
    super.willDestroy(...arguments);
  }
}

{{! 使用Modifier替代didInsertElement}}
<input {{autofocus}} />

// 不推荐 - 在组件中操作DOM
export default class MyComponent extends Component {
  didRender() {
    document.querySelector('#input').focus();
  }
}

// 推荐 - 使用Modifier
<input {{autofocus}} />

// 好的做法 - 始终清理资源
export default class MyComponent extends Component {
  constructor(owner, args) {
    super(owner, args);
    this.subscription = this.subscribe();
  }

  willDestroy() {
    this.subscription?.unsubscribe();
    super.willDestroy(...arguments);
  }
}

// 不推荐
export default class MyComponent extends Component {
  constructor(owner, args) {
    super(owner, args);
    this.loadData(); // 异步操作
  }
}

// 推荐 - 使用资源或Modifier
export default class MyComponent extends Component {
  @use data = RemoteData('/api/data');
}