React。 setStateメソッドを実装するデバウンス関数

Question

私はビューポートの寸法を子に渡す簡単なコンポーネントを開発しています。ウィンドウのサイズ変更では、新しいウィンドウ寸法を子コンポーネントに渡すためにhandleResizeメソッドを開始します。私は、handleResizeメソッドが呼び出される回数（ref）を最小限に抑えるために、lodashのデバウンス関数を使いたいと思っています。

import React from 'react' 

import debounce from 'lodash/debounce' 

const getDimensions = (Component) => { 
    return class GetDimensions extends React.Component { 
    constructor() { 
     super() 

     this.state = { 
     viewport: { 
      x: window.innerWidth, 
      y: window.innerHeight 
     } 
     } 
    } 

    handleResize =() => { 
     this.setState(() => ({viewport: {x: window.innerWidth, y: window.innerHeight}})) 
    } 

    componentDidMount =() => { 
     if (window) window.addEventListener('resize', debounce(this.handleResize, 400)) 
    } 

    componentWillUnmount =() => { 
     if (window) window.removeEventListener('resize', this.handleResize) 
    } 

    render() { 
     return (
     <Component 
      {...this.props} 
      viewport={this.state.viewport} 
     /> 
    ) 
    } 
    } 
} 

export default getDimensions 

期待どおりに動作しますが、私は警告を得続けること：

誰もが何が起こっているか知っていますか？

教えてください

Answer 1

あなたはイベントを削除していないことにご注意ください。 if (window) window.addEventListener('resize', debounce(this.handleResize, 400))は関数を変更し、ラップされた関数を返します。イベントの削除は見つからない元のthis.handleResizeを単に通過します。

コンストラクタにはthis.handleResize = debounce(this.handleResize, 400)が必要です。

tl; dr：コンポーネントはアンマウントされますが、イベントは起動し続けます。