激活处理程序
激活处理程序是为场景对象提供外部行为的有用工具。当场景对象被挂载时，会调用激活处理程序。
类似于 React 的useEffect，激活处理程序返回一个function(停用处理程序)，该函数应该用于清理激活处理程序中添加的所有行为。当场景对象被卸载时，会调用停用处理程序。
注意
如果您想向核心场景对象添加外部行为，激活处理程序尤其有用。它们减少了实现处理场景对象连接的自定义场景对象的需要。
本主题介绍如何创建和使用激活处理程序。
添加激活处理程序
请按照以下步骤创建激活处理程序。
步骤 1. 创建场景
首先创建一个渲染时间序列面板和文本面板的场景
const queryRunner = new SceneQueryRunner({
datasource: {
type: 'prometheus',
uid: '<PROVIDE_GRAFANA_DS_UID>',
},
queries: [
{
refId: 'A',
range: true,
format: 'time_series',
expr: 'rate(prometheus_http_requests_total[5m])',
},
],
});
const timeSeriesPanel = PanelBuilders.timeseries().setTitle('Panel title').setData(queryRunner).build();
const debugView = PanelBuilders.text()
.setTitle('Debug view')
.setOption('mode', TextMode.HTML)
.setOption('content', '')
.build();
const scene = new EmbeddedScene({
$timeRange: new SceneTimeRange(),
controls: [new SceneTimePicker({ isOnCanvas: true }), new SceneRefreshPicker({ isOnCanvas: true })],
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: timeSeriesPanel,
}),
new SceneFlexItem({
width: '30%',
body: debugView,
}),
],
}),
});
步骤 2. 添加激活处理程序
向SceneQueryRunner添加一个激活处理程序，该处理程序订阅状态更改并在文本面板中显示执行的查询。请记住，在激活SceneQueryRunner之前不会创建对状态的订阅
queryRunner.addActivationHandler(() => {
let log = '';
const sub = queryRunner.subscribeToState((state) => {
log =
`${new Date(Date.now()).toLocaleTimeString()} Executed query: <pre>${state.queries.map((q) => q.expr)}</pre>\n` +
log;
debugView.setState({
options: {
content: log,
},
});
});
});
步骤 3. 返回停用处理程序
从激活处理程序中返回一个函数，该函数将在对象停用时取消订阅queryRunner状态更改
queryRunner.addActivationHandler(() => {
let log = '';
const sub = queryRunner.subscribeToState((state) => {
log =
`${new Date(Date.now()).toLocaleTimeString()} Executed query: <pre>${state.queries.map((q) => q.expr)}</pre>\n` +
log;
debugView.setState({
options: {
content: log,
},
});
});
// Return deactivation handler
return () => {
sub.unsubscribe();
};
});