首先一句話概括區(qū)別：
-
React Element就是一個Virtual DOM
- Virtual DOM 是一個JS對象
React Component其實(shí)就是一個Class或者一個function （一個定義）
React Component render方法以及stateless函數(shù)的返回值就是一個React Element。
React 組件（Component）
React通過組件的思想绳瘟，將界面拆分成一個個可以復(fù)用的模塊刺下，每一個模塊就是一個React 組件。一個React 應(yīng)用由若干組件組合而成稽荧，一個復(fù)雜組件也可以由若干簡單組件組合而成橘茉。
我們通常使用Class方式以及function兩種方式創(chuàng)建React組件。
Element
在React中Element通常指代的是render函數(shù)或者stateless函數(shù)返回的Object對象,類似于下面的結(jié)構(gòu)
const element = {
type: String,
props: {
children: [Array,String....],
...
}
}
這個對象通常作為虛擬DOM姨丈，用來該React組件的結(jié)構(gòu)和渲染方式畅卓，React通過調(diào)用ReactDOM.render將這些虛擬DOM在瀏覽器上渲染成真實(shí)DOM。
在React中Element根據(jù)其type屬性的不同蟋恬，分成兩類： 以原生的DOM元素作為return值的組件翁潘，以及以React組件作為return值的組件
React組件返回原生DOM
這類Element的特點(diǎn)是其type屬性是原生DOM，舉個例子：
//React組件的定義
const Hello = (props) => <div>hello world! <span>{props.name}</span></div>
//該函數(shù)被調(diào)用歼争，產(chǎn)生的React Element
{
type: 'div',
props: {
children: [
'hello world!',
{
type: 'span',
children: '***'
}],
name: ***
}
}
此類Element由于和真實(shí)DOM類似拜马，React會直接根據(jù)這個virtual DOM渲染真實(shí)DOM。
React組件返回React組件
這類Element的type首字母大寫
class Home extends React.Component {
render() {
return (
<div>
<Welcome name='老干部' />
<p>Anything you like</p>
</div>
)
}
}
{
type: 'div',
props: {
children: [
{
type: 'Welcome',
props: {
name: '老干部'
}
},
{
type: 'p',
props: {
children: 'Anything you like'
}
}沐绒，
]
}
}
React 知道如何渲染type = 'div' 和 type = 'p' 的節(jié)點(diǎn)俩莽，但不知道如何渲染type='Welcome'的節(jié)點(diǎn)
當(dāng)React 發(fā)現(xiàn)Welcome 是一個React 組件時，會調(diào)用該組件的render方法乔遮，產(chǎn)生該組件的Element扮超，如果該組件的element中有首字母大寫開頭的Element的type，繼續(xù)找下去蹋肮，直到?jīng)]有首字母大寫的type弹灭。
因此榕暇，所有的React組件必須首字母大寫，原因是生成React Element的時候嫂丙，type屬性會直接使用該組件的實(shí)例化時使用的名字（<InstanceName />）如果沒大寫React將不能判斷是否需要繼續(xù)調(diào)用該組件的render方法創(chuàng)建Element
實(shí)例
只有使用Class定義的組件缠诅，才有實(shí)例原在。
class Home extends React.Component {
render() {
return (
<div>
<Welcome name='老干部' />
<p>Anything you like</p>
</div>
)
}
}
//如果Welcome是使用Class定義的硝全，那么Home中對他的調(diào)用就是創(chuàng)建Welcome的實(shí)例
//如果Welcome是function定義的农猬，那么Home中就是對這個function的調(diào)用
在React中，組件是一種定義有送，而真正發(fā)揮作用的是實(shí)例淌喻。
- 使用function定義的組件：沒有實(shí)例
- 不能ref： ref回調(diào)函數(shù)作用于React組件時僧家，是將組件的實(shí)例作為參數(shù)傳入的雀摘，因?yàn)閒unction沒有實(shí)例，因此ref作用于functional component是永遠(yuǎn)不會被調(diào)用的
- 使用class定義的組件：有實(shí)例
