4

リンクに応じた以下のコードは、反応すると次のように述べています。

残念ながら、これによりサーバー レンダリングでメモリ リークが発生する可能性があります (componentWillUnmount が呼び出されることはありません)。

// Before
class ExampleComponent extends React.Component {
  componentWillMount() {
    this.setState({
      subscribedValue: this.props.dataSource.value,
    });

    // This is not safe; it can leak!
    this.props.dataSource.subscribe(
      this.handleSubscriptionChange
    );
  }

  componentWillUnmount() {
    this.props.dataSource.unsubscribe(
      this.handleSubscriptionChange
    );
  }

  handleSubscriptionChange = dataSource => {
    this.setState({
      subscribedValue: dataSource.value,
    });
  };
}

これがサーバー側でメモリリークになる可能性があることを理解できません。たとえば、サーバー側でレンダリングされるこのコードがあり、ExampleComponent にメモリ リークが含まれているとします。

import React from 'react';
import ReactDomServer from 'react-dom/server';
import App from './components/index'

const serverRender =  () =>{
    return ReactDomServer.renderToString(<ExampleComponent />);
};

export default serverRender;

これがクライアントに返されると、レンダリングされたコンポーネントはどこにもアタッチされておらず、GB を収集する準備ができています。では、なぜメモリ リークが発生するのでしょうか。

4

2 に答える 2