一、组件、ReactElement、组件实例的区别
- 概念上的区别
- 组件是一个函数或者一个类，它决定了如何把数据变成视图。
- ReactElement只是一个普通对象，它表述了组件实例或者DOM节点。
- 组件实例则是组件类的实例化对象。
-
代码演示
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这样的渲染模块来执行渲染了。
