概览

官方文档链接

  • render()
  • hydrate() （本文不用）
  • unmountComponentAtNode()
  • findDOMNode()

  • createPortal()

    render

    接收参数

  • 第一个参数是组件，表示要挂载哪个组件

  • 第二个参数是要挂载到哪里，即容器

  • 第三个参数是回调函数，在组件被挂载成功后调用，一般比较少使用

    1. ReactDOM.render(
    2.   <App />,
    3. document.getElementById('root'),
    4. ()=>{}
    5. );

    更新机制

    以前是stack，每次更新DOM节点时，都会比对完所有变化，再进行更新，当DOM节点过多时，界面就会变得很不流畅，像打游戏掉帧一样。
    现在用Fiber，将整体划分为很多小任务，每个任务尽量在16ms以内完成（与人的视觉 对60hz的感受就比较流畅 有关）每当小任务执行完就更新那一部分，使得视觉上的体验提升。

    unmountComponentAtNode

    用于卸载组件

    接收参数

    要卸载的组件所在的容器

    1. ReactDOM.render(
    2.   <App />,
    3. document.getElementById('root'),
    4. ()=>{
    5.   setTimeout(()=>{
    6.     ReactDOM.unmountComponentAtNode(document.getElementById('root') as HTMLElement)
    7.   } ,3000)
    8. }
    9. );

    findDOMNode

    官方不推荐使用
    找到组件所在的真实DOM，所以该方法还依赖于ref

    1. let node:any
    2. ReactDOM.render(
    3.   <App ref={node => app = node}/>,
    4. document.getElementById('root'),
    5. );
    6. let a = ReactDOM.findDOMNode(app)
    7. console.log(a) //一个真实DOM

    createProtal

    用法和render很相似，但这是一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。
    实用场景：

  • 弹框设计可能会用到，需要挂载到最顶层的容器上