javascript - @withViewPort装饰器在React中如何工作？

我正在阅读此装饰器，并发现@withViewPort用法为：

import React from 'react';
import withViewport from 'react-decorators/withViewport';

@withViewport
class MyComponent {
  render() {
    let { width, height } = this.props.viewport;
    return <div>Viewport: {width + 'x' + height}</div>;
  }
}

React.render(<MyComponent />, document.body);

@withViewPort装饰器如何工作？它是否具有状态，并且这些状态在调整窗口大小时会发生变化？

最佳答案

这是一个更高阶的组件，为该组件添加了一个监听window.resize的处理程序。 Src：https://github.com/kriasoft/react-decorators/blob/master/src/withViewport.js

装饰器与执行的操作相同：

const MyComposedComponent = withComponent(MyComponent);
render(<MyComposedComponent />, document.body);