React 組件生命周期：render 和 return 之間有什么區別，返回之后發生什么？

Question

這是一個關於反應組件生命周期概念的廣義問題。 下面是一些示例代碼。 請將代碼視為模糊的參考。

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>
  );
};

我注意到在函數式組件中，我傳入鈎子 useEffect() 的函數是在 return() 執行之后執行的。 （ console.log('check useEffect')在useEffect（）定義經過一些其他控制台日志是內執行時，才執行renderContent內側方法return()

1. 我根據定義知道，在組件完成渲染后調用useEffect() 。 那么render完成是什么意思呢？

2. 組件“渲染”和組件“返回”之間的關系是什么（React 功能組件）

3. 在useEffect() ，我們總是返回document.body.style.overflow = 'visible'; ，那為什么還要運行document.body.style.overflow = 'hidden'; 回國前？

Answer 1

首先，讓我們定義一些關鍵字。

什么是油漆？

繪制：用戶代理在將渲染樹轉換為屏幕上的像素時執行了“繪制”（或“渲染”）。 正式地，我們認為用戶代理在執行更新事件循環的渲染步驟時已經“渲染”了一個文檔。

油漆參考

什么是render以及它是如何工作的？

基本上，渲染過程是瀏覽器繪制，只需更多步驟。 React 需要定義要（重新）渲染什么，不渲染什么。 這個過程也稱為和解。

更多關於和解

問題 1

useEffect等待瀏覽器完成繪制，以便您的渲染過程不會被useEffect執行阻止。 如果您不想等待繪制完成，可以使用useEffectLayout

問題2

查看 Dan Abramov 的這篇精彩文章（React 的核心成員之一）

類與功能組件

問題 3 和 Q1 的第一部分

我不能比這個人解釋得更好。 所以也看看這個。 https://stackoverflow.com/a/65225493/7942117