What is lazy rendering
Inert rendering is a way of rendering optimization, one of the simplest a React components, such as the Drawer Drawer components, starting with the Drawer is not show, the prop that is visible if initial to false, then in the render will return null, This means that the drawer component is not rendered, and there is no corresponding structure in the DOM tree. And then when you click on a button and set visible to True, that’s when the drawer component is rendered, and then you click on the button and set Visible to False, that’s when the component is hidden, but it’s still in the DOM, and the nice thing about this process is that it’s a lot easier to render when you start loading. Take a look at the source code of DRAWERS from Antd
The source code parsing
If the component is loaded for the first time, return null; otherwise, render the component. If the component is not loaded for the first time, then render the component with display: None
The Portal component is a component that encapsulates the React native Portal usage. If you want to use the render function, you can use the DrawerWrapper component in the render function. You have to use portal because you need to hang the Drawer on the body
return (
<Portal
visible={open}
forceRender={$forceRender}
getContainer={getContainer}
wrapperClassName={wrapperClassName}
>{({ visible, afterClose, ... Rest}: IChildProps) => (// React 15, componentWillUnmount when Portal returns afterClose, visible.<Child
{. props}
{. rest}
open={visible! = =undefined ? visible : open}
afterVisibleChange={afterClose! = =undefined ? afterClose : props.afterVisibleChange}
handler={handler}
onClose={this.onClose}
onHandleClick={this.onHandleClick}
/>
)}
</Portal>
);
Copy the code
Here, the visible property open is derived from the visible prop that the user passed into the Drawer component, which controls the display and hiding of the Portal. There is no sign of lazy rendering. In fact, all antD components are a series of components encapsulated from the beginning of RC
import Portal from 'rc-util/lib/PortalWrapper';
Copy the code
Find render of the PortalWrapper component and the truth is revealed
render() {
const { children, forceRender, visible } = this.props;
let portal = null;
const childProps = {
getOpenCount: (a)= > openCount,
getContainer: this.getContainer,
switchScrollingEffect: this.switchScrollingEffect,
};
// Omit some code
if (forceRender || visible || this._component) {
portal = (
<Portal getContainer={this.getContainer} ref={this.savePortal}>
{children(childProps)}
</Portal>
);
}
return portal;
}
Copy the code
So you can see here that you’re using a portal variable, so if visible is false initially, you just go to the final return portal, which returns null, doesn’t render anything, and then if Visible is set to true, you go to the if branch, The key here is that ref references the savePortal
savePortal = c= > {
// Warning: don't rename _component
// https://github.com/react-component/util/pull/65#discussion_r352407916
this._component = c;
};
Copy the code
Once the component is rendered, save the Portal reference to the _component private variable. If visible is false again, go to the if branch again. Since this._component is not null, we achieve lazy rendering