Размонтирование компонентов React Intercept (функциональные и классные компоненты)

Мне нужно всегда перехватывать, когда React отключает компонент, независимо от того, является ли это компонентом Functional или Class.

Вот мой случай:

function observe(component) {
  const p = component.type.prototype;
  const delegate = p.componentWillUnmount || function noop() {};

  if(!delegate.__decorated) {
    p.componentWillUnmount = function() {
      console.log('I am going to be unmounted');

      return delegate.apply(this, arguments);
    }

    p.componentWillUnmount.__decorated = true;
  }

  return component;
}

class Comp extends React.Component {

  render() {

    return (<h1>Hello World</h1>);
  }
}

class App extends React.Component {

  render() {
    const active = this.state && this.state.active;
    const toggle = () => this.setState({
      active: !active,
    });

    return (
      <div>
        <button onClick={toggle}>Toggle</button>
        <hr />
        {active && observe(<Comp />)}
      </div>
    );
  }
}

Теперь, как вы можете легко видеть, я могу подключаться каждый раз, когда <Comp /> получает размонтирование. Это то, что мне нужно.

Все будет резко изменяться, если <Comp /> является функциональным компонентом:

function observe(component) {
  const p = component.type.prototype;
  const delegate = p.componentWillUnmount || function noop() {};

  if(!delegate.__decorated) {
    p.componentWillUnmount = function() {
      console.log('I am going to be unmounted');

      return delegate.apply(this, arguments);
    }

    p.componentWillUnmount.__decorated = true;
  }

  return component;
}



function Comp() {

  return (<h1>Hello World</h1>);
}


class App extends React.Component {

  render() {
    const active = this.state && this.state.active;
    const toggle = () => this.setState({
      active: !active,
    });

    return (
      <div>
        <button onClick={toggle}>Toggle</button>
        <hr />
        {active && observe(<Comp />)}
      </div>
    );
  }
}

Итак, мой вопрос:

Как подключить функциональные компоненты?

Я могу изменить подход (или использовать React internal Apis), мне просто нужно всегда перехватывать изменения на компоненте, переданном как аргументы для observe.

Ответ 1

Вы не можете. Функциональные компоненты не имеют жизненных циклов (пока).

Вместо того, чтобы напрямую взаимодействовать с функциональным компонентом, почему бы вам просто не добавить функциональный компонент в класс с помощью HOC. Для этого вы можете использовать recompose toClass.

function observe(component) => {
  const classComponent = toClass(component):
  const p = classComponent.type.prototype;
  const delegate = p.componentWillUnmount || function noop() {};

  if(!delegate.__decorated) {
    p.componentWillUnmount = function() {
      console.log('I am going to be unmounted');

      return delegate.apply(this, arguments);
    }

    p.componentWillUnmount.__decorated = true;
  }

  return classComponent;
}

Или просто скопируйте код из здесь.