一、組件、ReactElement、組件實例的區(qū)別
- 概念上的區(qū)別
- 組件是一個函數(shù)或者一個類，它決定了如何把數(shù)據(jù)變成視圖。
- ReactElement只是一個普通對象，它表述了組件實例或者DOM節(jié)點。
- 組件實例則是組件類的實例化對象。
-
代碼演示
import React from 'react;
import { render } from 'react-dom;
import App from './src/App';const componentInstance = render(<App />, document.querySelector('root')); console.log('組件、ReactElement、組件實例依次如下：'); console.log(App); console.log(<App />); console.log(componentInstance);
二、React組件的渲染過程
當react遇到表示組件的ReactElement時，它會給這個ReactElement表示的組件一些props（有時候也包括context），然后問該組件渲染的ReactElement是什么。如果渲染的仍然是表示組件的ReactElement，那么將會一直問下去，直到了解所有組件要渲染的DOM元素為止。此時，React就可以用react-dom或者react-native這樣的渲染模塊來執(zhí)行渲染了。
