React - createPortal

1、ReactDOM.createPortal并不直接渲染DOM元素，而是渲染一个React元素，一个绑定好了挂载点的React元素，并且并不随组件引用位置而改变（一般的React元素引用位置在哪就在哪里渲染
2、方法

createPortal(child,container)

3、参数

 - child 是任何可渲染的Rax子元素，例如一个元素，字符串或Fragment
 - container 是一个Dom 元素

4、Rax 基于 React 的标准，支持在不同容器中渲染，当前最重要的容器即 Weex 和 Web
1、Weex框架能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持 iOS、安卓、YunOS及Web等多端部署。
5、createPortal 和render 渲染的区别

//ReactDom.createPortal 渲染
const A = props => {
  const div = document.createElement('div')
  document.body.appendChild(div)
  return ReactDOM.createPortal(<div>gjw</div>, div)
} 
------------------------------------------------------------------
//React.render 渲染
class Ex extends React.Component {
  render () {
    <A></A>
  }
}
ReactDOM.render(<Ex/>, document.body)

6、ReactDOM.createPortal并不直接渲染DOM元素，而是渲染一个React元素，一个绑定好了挂载点的React元素，并且并不随组件引用位置而改变（一般的React元素引用位置在哪就在哪里渲染）
ReactDOM.render直接渲染DOM元素，会直接影响页面

7、使用createPortal

import React, { Component } from 'react';
//引入 createPortal
import { createPortal } from 'react-dom';
class test extends Component {
    constructor(props) {
        super(props)
        //  记录参数 利用window.document
        const doc = window.document;
        console.log(doc, "---获取整个的document");
        // 定义this.node 创建一个div节点
        this.node = doc.createElement("div");
        // console.log(this.node,'--- 在document里面创建div');
        // 当前的body下挂载一个div节点
        doc.body.appendChild(this.node)
        // console.log(doc.body.appendChild(this.node),'在document.body下面追加一个div');
    }
    render() {
        // 实现createPortal
        return createPortal(
            <div className='dialog'>
                <h3>
                    Modal
                 </h3>
            </div>, this.node
        )
    }
    // 在willUnmount中实现订阅和取消订阅
    componentWillUnmount() {
        window.document.body.removeChild(this.node)
    }
}
export default test;