javascript - React JS Context API - 窗口滚动事件

Question

鉴于 React 16 的 Context API，我查看了我认为可能是过时的两个答案。

他们是:

React.js best practice regarding listening to window events from components

还有:

How to implement service(concept in AngularJS) -like component in React

我对 React 相当陌生，所以我想知道，鉴于 Context API ，是在 React 中执行 Angular.js 类型服务的正确方法(因此我没有在每个监听滚动事件的组件上使用 window.addEventListener("scroll")利用 Context API(在那里创建事件监听器？)。只是想知道我是否走在正确的轨道上......

它讨论了能够传递 props，以及嵌套组件能够更改状态，让包装器组件收集滚动位置、更新上下文(滚动位置)并传递它是错误的吗？直至所需的元素？是否有推荐的方法来执行此操作，并且多个 window.addEventListener("scroll") 甚至会出现问题吗？

我无法理解如何在创建嵌套组件后更新上下文 - 在此处的文档中:https://reactjs.org/docs/context.html#updating-context-from-a-nested-component

所以我不确定是否从顶级/父元素更新上下文并将其传递到内部组件。

Answer 1

您可以使用context API创建一个具有 HoC 的 Provider 。每当窗口大小发生变化时，提供者都会通过更新宽度/高度来通知使用者，而 HoC 中的使用者会重新渲染组件。

示例:

const getDimensions = () => ({
  width: window.innerWidth,
  height: window.innerHeight
});

const ResizeContext = React.createContext(getDimensions());

class ResizeProvider extends React.PureComponent {
  state = getDimensions();
  
  // you might want to debounce or throttle the event listener
  eventListener = () => this.setState(getDimensions());

  componentDidMount() {
    window.addEventListener('resize', this.eventListener);
  }
  
  componentWillUnmount() {
    window.removeEventListener('resize', this.eventListener);
  }
  
  render() {
    return (
      <ResizeContext.Provider value={this.state}>
      {
        this.props.children
      }
      </ResizeContext.Provider>
    );
  }
}

const withResize = (Component) => (props) => (
  <ResizeContext.Consumer>
  {({ width, height }) => (
    <Component {...props} width={width} height={height} />
  )}
  </ResizeContext.Consumer>
);
  
const ShowSize = withResize(({ width, height }) => (
  <div>
    <div>Width: {width}</div>
    <div>Height: {height}</div>
  </div>
));

const Demo = () => (
  <ResizeProvider>
    <ShowSize />
  </ResizeProvider>
);

ReactDOM.render(
  <Demo />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>