React Hooks如何访问componentWillUnmount

Question

你好，我正在尝试将以下代码传递给reacthooks：

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

React钩子中的componentDidMount和componentWillUnmount的基本等效项是：

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

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

还可以将这些组合到一个useEffect中

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

这个过程被称为效果清理，你可以从documentation中阅读更多内容。