如何删除 componentWillUnmount() 中的函数调用？答案

【问题标题】：How to remove function call in componentWillUnmount()?如何删除 componentWillUnmount() 中的函数调用？
【发布时间】：2018-09-12 07:42:56
【问题描述】：

我不确定我是否根据我的问题来表达我的问题，但也许代码会有所帮助：

import React from 'react';
import PropTypes from 'prop-types';
import { Component } from 'kawax-js';

class Reference extends React.Component {

 state={fileDisplayed:""}

 static propTypes = {
 getFile: PropTypes.func.isRequired,
 content: PropTypes.object
 }

 static defaultProps = {
 content: Object()
 }

 componentDidMount = async() => {
 this.props.getFile(this.props.match.params.refHash);
 }

 componentWillUnmount() {
 }
 ....

当我尝试在组件之间切换时出现内存泄漏错误。一旦我想返回上一个组件，如何确保来自 componentDidMount 的函数调用在 componentWillUnmount 中被取消？

【问题讨论】：

1.函数调用在内部做什么？特别是，该函数的代码的哪一部分取决于您组件的生命周期？ 2. componentDidMount 是异步的，但它没有返回getFile 承诺。这将为getFile 生成一个单独的承诺上下文。

标签： javascript reactjs components lifecycle

【解决方案1】：

默认情况下，Promise 是不可取消的（我想你的 get 是通过一个 Promise 的）不过，你有一些选择：

选项 1 - 使用 Bluebird

// Bluebird promise cancellation
const promise = new Promise((resolve, reject, onCancel) => {
  const id = setTimeout(resolve, 1000);
  onCancel(() => clearTimeout(id));
});
// use the promise as usual
promise.then(() => console.log('done'));
// anytime later
promise.cancel();

选项 2 - 使用另一个承诺

/ a basic stitched-together CancelToken
// creation mechanism
function createToken() {
  const token = {};
   token.promise = new Promise(resolve => {
    cancel = (reason) => {
      // the reason property can be checked
      // synchronously to see if you're cancelled
      token.reason = reason;
      resolve(reason);
    });
  };
  return { token, cancel };
}
// create a token and a function to use later.
const { token, cancel } = createToken();
// your functions that return promises would also take
// a cancel token
function delay(ms, token) {
  return new Promise(resolve => {
    const id = setTimeout(resolve, ms);
    token.promise.then((reason) => clearTimeout(id));
  });
};

选项 3 - 使用 Rx 订阅

// create a subscription to use with your promise
const subscription = new Rx.Subscription();
const promise = new Promise(resolve => {
  const id = setTimeout(resolve, 1000);
  // add teardown logic to the subscription
  subscription.add(() => clearTimeout(id));
});
// use the promise as usual
promise.then(() => console.log('done'));
// call unsubscribe at any point to cancel
subcscription.unsubscribe();

选项 4 - 放弃承诺，只使用 Observables！

// create an observable, you can return teardown logic
const source$ = new Rx.Observable(observer => {
  const id = setTimeout(() => observer.next(), 1000);
  return () => clearTimeout(id);
};
// subscribing gives you a subscription
const sub = source$.subscribe(() => console.log('done'));
// cancel at any time later
sub.unsubscribe();

参考：https://medium.com/@benlesh/promise-cancellation-is-dead-long-live-promise-cancellation-c6601f1f5082

【讨论】：