React Hooks Как добраться до componentWillUnmount

Question

Здравствуйте, я пытаюсь передать следующий код для реагирования:

import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  // 2. Initialise your ref and targetElement here
  targetRef = React.createRef();
  targetElement = null;

  componentDidMount() {
    // 3. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). 
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = this.targetRef.current; 
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 4. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 5. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  }

  componentWillUnmount() {
    // 5. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor 
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {   
    return (
      // 6. Pass your ref with the reference to the targetElement to SomeOtherComponent
      <SomeOtherComponent ref={this.targetRef}>
        some JSX to go here
      </SomeOtherComponent> 
    );
  }
}

И затем я сделал следующее с крючками:

  const [modalIsOpen, setIsOpen] = useState(false);
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };

  const targetRef = useRef();

  const showTargetElement = () => {
    disableBodyScroll(targetRef);
  };

  const hideTargetElement = () => {
    enableBodyScroll(targetRef);
  };

  useEffect(() => {
    if (modalIsOpen === true) {
      showTargetElement();
    } else {
      hideTargetElement();
    }
  }, [modalIsOpen]);

Я не знаю, если я сделал это правильно с помощью useRef и useEffect, но это сработало, но я не представляю, как мне добраться до моего componentWillUnmount для вызова моего:

clearAllBodyScrollLocks ();

Answer 1

Базовые c эквиваленты для componentDidMount и componentWillUnmount в React Hooks:

//componentDidMount
useEffect(() => {
    doSomethingOnMount();
}, [])

//componentWillUnmount
useEffect(() => {
   return () => {
       doSomethingOnUnmount();
   }
}, [])

Они также могут быть объединены в один useEffect:

useEffect(() => {
    doSomethingOnMount();
    return () => {
        doSomethingOnUnmount();
    }
}, [])

Этот процесс называется эффектом очистки, вы можете прочитать больше в документации .