手機也能上課
1/6
ReactDOM.render
上節(jié)提到,DOM 元素是根據 React 元素進行渲染的,那么問題來了:如何按照預期,將一個指定的 React 元素渲染到頁面的指定地方呢?
了解一下 react-dom.js
所提供的頂層 API ReactDOM.render()
:
ReactDOM.render(element, container [, callback])
API 解析:
- 作用:
- 在指定的 DOM 節(jié)點(container)里渲染一個 React 元素(element);
- 如果在 container 里已經渲染過 React 元素,
ReactDOM.render()
方法將對其執(zhí)行更新操作,并且會比較前后兩次的差異,僅在必要的地方更新 DOM;
- 參數:
- element:需要渲染的 React 元素;
- container:在提供的 container 里渲染 React 元素;
- callback:可選的回調函數,在 React 元素渲染完成或更新完成后執(zhí)行;
- 不得不了解的小細節(jié):
ReactDOM.render()
方法不會修改 container 容器節(jié)點,只會修改容器的子節(jié)點;- 調用
ReactDOM.render()
方法后,容器節(jié)點里的所有內容都將由 React DOM 管理:- 首次調用時,容器節(jié)點里的所用 DOM 元素都會被替換;
- 后續(xù)調用時,會使用 React 的 DOM 差分算法(DOM Diffing Algorithm)進行高效的視圖更新;