这是一个关于组件生命周期中概念的广义问题。下面是一些示例代码。请将代码视为模糊的参考。

const Modal = ({
  className,
  variant,
  width,
  withCloseIcon,
  isOpen: propsIsOpen,
  onClose: tellParentToClose,
  renderLink,
  renderContent,
}) => {

  const [stateIsOpen, setStateOpen] = useState(false);
  const isControlled = typeof propsIsOpen === 'boolean';
  const isOpen = isControlled ? propsIsOpen : stateIsOpen;

  const $modalRef = useRef();
  const $clickableOverlayRef = useRef();

  const closeModal = useCallback(() => {
    if (!isControlled) {
      setStateOpen(false);
    } else {
      tellParentToClose();
    }
  }, [isControlled, tellParentToClose]);

  useEffect(() => {

    console.log('check useEffect')

    document.body.style.overflow = 'hidden'; // why bother? since always return "visible"

    return () => {
      document.body.style.overflow = 'visible';
    };
  }, [isOpen]);

  return (
    <Fragment>

      {isOpen &&
        ReactDOM.createPortal(
          <ScrollOverlay>
            <ClickableOverlay variant={variant} ref={$clickableOverlayRef}>
              <StyledModal
                className={className}
                ref={$modalRef}
              >
                {withCloseIcon && <CloseIcon type="close" variant={variant} onClick={closeModal} />}
                {renderContent({ close: closeModal })}
              </StyledModal>
            </ClickableOverlay>
          </ScrollOverlay>,
          $root,
        )}
    </Fragment>
  );
};

我注意到在函数组件中，我传递到hook useffect（）的函数是在return（）执行之后执行的( console.log('check useEffect') 在useffect（）中定义的仅在 renderContent 方法内部的 return() ).
我从定义上知道， useEffect() 在组件完成渲染后调用。那么，拥有它意味着什么呢 render 完成了？
组件“呈现”和组件“返回”（功能组件）之间的关系是什么
在 useEffect() ，我们总是回来 document.body.style.overflow = 'visible'; 那么，为什么还要费心跑步呢 document.body.style.overflow = 'hidden'; 在回来之前？