react 嵌套渲染_React使用原理

一 Portals

组件会按照既定层次嵌套渲染，如何让组件渲染到父组件以外？ 可以使用ReactDom.createPortal来做，在父子组件层级很深的情况下，如何把组件放到外面去。

<div className="modal">
   {this.props.children}
</div>

<PortalDemo>
  modal框
</PortalDemo>

这样会导致层级的深度，不利于页面展示效果

使用 ReactDom.createPortal 方法将组件放入最外面能够使类似于弹框的效果更加明显

return ReactDom.createPortal(
    <div className="modal">
  {this.props.children}
</div>,
document.body
)

效果如下：