# 性能监听

组件来源: 图形系统v2 - 提取

## 1.功能说明

该组件用于监听当前页面的性能并展示（严格来说这只是一个类，不是组件）

## 2.组件依赖

-- stats.js

## 3.组件（类）接口

| 变量名   | 变量类型  | 变量作用  |
| :----: |:----:| :---------:|
| parentId  | string | 外部包装监听器的模块的id |

## 4.案例

想在某个函数组件X中添加监听器

1)导入组件（类）

```tsx
import StatsPanel from './common/stats-panel';
```

2)在函数组件X中用useState定义监听器变量并在useEffect中初始化

```tsx
const [panel, setPanel] = useState<StatsPanel>(null);
    useEffect(() => {
        if(!panel){
            setPanel(new StatsPanel("171717"));  //后面会定义id为171717的模块
        }
    }, [])
```

3)在函数组件X中添加需要刷新页面的部分，并在需要刷新的地方加上调用监听器的update方法

```tsx
const [value, setValue] = useState<number>(0);
const [value2, setValue2] = useState<number>(0);
useEffect(() => {
    const timer = setInterval(() => {
        setValue(value + 1);
        panel?.update();
    }, 200);
    return () => clearInterval(timer);
}, [value]);

useEffect(() => {
    const timer = setInterval(() => {
        setValue2(value2 + 1);
        panel?.update();
    }, 160);
    return () => clearInterval(timer);
}, [value2]);
```

4)在函数组件X中添加需要刷新的部分与监听器组件

```tsx
<div className="tn-test">
    <div>{value}</div>  {/* 需要刷新的部分1 */}
    <div>{value2}</div> {/* 需要刷新的部分2 */}
    <div id="171717"></div>  {/* 监听器外壳 */}
</div>
```

## 5.备注

该组件多用于监听three.js的页面渲染，在场景渲染的animate()方法中加入监听器的update()方法，即可实现对页面性能的监听