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