![](/img/trans.png)
[英]What is the difference between React component’s phases and React component’s life cycle?
[英]React component life cycle: what is difference between render and return and happens after the return?
这是一个关于反应组件生命周期概念的广义问题。 下面是一些示例代码。 请将代码视为模糊的参考。
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()
我根据定义知道,在组件完成渲染后调用useEffect()
。 那么render
完成是什么意思呢?
组件“渲染”和组件“返回”之间的关系是什么(React 功能组件)
在useEffect()
,我们总是返回document.body.style.overflow = 'visible';
,那为什么还要运行document.body.style.overflow = 'hidden';
回国前?
首先,让我们定义一些关键字。
什么是油漆?
绘制:用户代理在将渲染树转换为屏幕上的像素时执行了“绘制”(或“渲染”)。 正式地,我们认为用户代理在执行更新事件循环的渲染步骤时已经“渲染”了一个文档。
什么是render
以及它是如何工作的?
基本上,渲染过程是浏览器绘制,只需更多步骤。 React 需要定义要(重新)渲染什么,不渲染什么。 这个过程也称为和解。
问题 1
useEffect
等待浏览器完成绘制,以便您的渲染过程不会被useEffect
执行阻止。 如果您不想等待绘制完成,可以使用useEffectLayout
问题2
查看 Dan Abramov 的这篇精彩文章(React 的核心成员之一)
问题 3 和 Q1 的第一部分
我不能比这个人解释得更好。 所以也看看这个。 https://stackoverflow.com/a/65225493/7942117
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.