App下载
4. 第二节 将 React 元素渲染为 DOM
React 入门课程 / 4. 第二节 将 React 元素渲染为 DOM
手机也能上课
App下载
1/6

ReactDOM.render

上节提到,DOM 元素是根据 React 元素进行渲染的,那么问题来了:如何按照预期,将一个指定的 React 元素渲染到页面的指定地方呢?

了解一下 react-dom.js 所提供的顶层 API ReactDOM.render()

ReactDOM.render(element, container [, callback])

API 解析:

  • 作用:
    1. 在指定的 DOM 节点(container)里渲染一个 React 元素(element);
    2. 如果在 container 里已经渲染过 React 元素,ReactDOM.render() 方法将对其执行更新操作,并且会比较前后两次的差异,仅在必要的地方更新 DOM;
  • 参数:
    • element:需要渲染的 React 元素;
    • container:在提供的 container 里渲染 React 元素;
    • callback:可选的回调函数,在 React 元素渲染完成或更新完成后执行;
  • 不得不了解的小细节:
    1. ReactDOM.render() 方法不会修改 container 容器节点,只会修改容器的子节点;
    2. 调用 ReactDOM.render() 方法后,容器节点里的所有内容都将由 React DOM 管理:
      • 首次调用时,容器节点里的所用 DOM 元素都会被替换;
      • 后续调用时,会使用 React 的 DOM 差分算法(DOM Diffing Algorithm)进行高效的视图更新;
+10 经验 +10积分
解析
提示
参考答案
+10 经验 +10积分
视频播放结束,是否学习下一节?