组件、ReactElement、组件实例的区别及组件的渲染过程

一、组件、ReactElement、组件实例的区别

1. 概念上的区别

• 组件是一个函数或者一个类，它决定了如何把数据变成视图。
• ReactElement只是一个普通对象，它表述了组件实例或者DOM节点。
• 组件实例则是组件类的实例化对象。

2. 代码演示
   import React from 'react;
   import { render } from 'react-dom;
   import App from './src/App';

   const componentInstance = render(, document.querySelector('root'));
   
   console.log('组件、ReactElement、组件实例依次如下：');
   console.log(App);
   console.log();
   console.log(componentInstance);
   

---

二、React组件的渲染过程

当react遇到表示组件的ReactElement时，它会给这个ReactElement表示的组件一些props（有时候也包括context），然后问该组件渲染的ReactElement是什么。如果渲染的仍然是表示组件的ReactElement，那么将会一直问下去，直到了解所有组件要渲染的DOM元素为止。此时，React就可以用react-dom或者react-native这样的渲染模块来执行渲染了。