React 组件生命周期：render 和 return 之间有啥区别，return 之后会发生啥？

Posted 2023-02-22

技术标签:

【中文标题】React 组件生命周期：render 和 return 之间有啥区别，return 之后会发生啥？【英文标题】：React component life cycle: what is difference between render and return and happens after the return?React 组件生命周期：render 和 return 之间有什么区别，return 之后会发生什么？ 【发布时间】：2021-09-20 21:47:03 【问题描述】：

这是一个关于 React 组件生命周期中概念的通用问题。下面是一些示例代码。请把代码当作一个模糊的参考。

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() 执行后执行的。（useEffect() 中定义的console.log('check useEffect') 仅在return() 内的renderContent 方法内执行了一些其他控制台日志后才会执行。

我知道根据定义，useEffect() 在组件完成渲染后被调用。那么完成render 意味着什么？

组件“渲染”和组件“返回”（React 功能组件）之间的关系是什么

在useEffect() 内，我们总是返回document.body.style.overflow = 'visible';，那么为什么还要在返回之前运行document.body.style.overflow = 'hidden';？

【问题讨论】：

【参考方案1】：

首先，让我们定义一些关键字。

什么是油漆？

Paint：当用户代理执行“绘制”（或“渲染”）时已将渲染树转换为屏幕上的像素。正式地，我们认为用户代理已经“渲染”了一个文档执行更新事件循环的渲染步骤。

Paint reference

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

基本上，渲染过程是浏览器绘制，步骤不多。 React 需要定义（重新）渲染什么和不渲染什么。此过程也称为对帐。