React——元素和组件

元素

定义

元素：作为构成React应用的最小砖块，一般通过JSX语法创建，描述我们在屏幕上能够看到的内容。React元素实际上是一个简单的JavaScript对象，一个React元素和界面上的一部分DOM对应，描述这部分DOM的结构以及渲染效果。（React元素不会对DOM进行直接渲染，而是由React DOM负责更新DOM来与React元素保持一致）
如下element就是一个基本的React元素：

const element=<h1>Hello,world</h1>;
ReactDOM.renfer(element,document.getElementById('root'));

分类

React元素可以分成两类：DOM类型元素和组件类型元素。
DOM类型元素所包含的是DOM标签，例如：h1 ，div ，p 等等。DOM类型元素通常在创建后被直接渲染，因为DOM类型元素和页面的DOM节点直接对应，所以React知道该如何进行渲染。
组件类型元素是通过使用React组件创建出来的。如下所示，Welcome就是一个用户自定义的组件，而element是一个组件类型元素：

function Welcome(props){
  return <h1>Hello,{props.name}</h1>;
}
const element=<Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root'))
}

其中，element的值就相当于如下形式，从中也能看出props是类似于结构体一样的存在：

const element={
  type:'Welcome',
  props:{
    name:'Sara'  
  }
}

注意事项

React是无法直接知道应该把element渲染成哪种结构的页面DOM，需要组件自身提供React可以直接识别的DOM节点信息。
不论如何，在大多数情况下，React元素都不会直接被使用，React内部会自动根据React元素，渲染出最终的页面DOM。React元素实际上描述的是React虚拟DOM结构，React会根据虚拟DOM渲染出页面的真实DOM。

组件

定义

组件，从概念上类似于JavaScript函数，它接受任意的入参（即“props”），并返回用于描述页面展示内容的React元素。

分类

组件有两种，分别为：函数组件与class组件。函数组件在本质上就是JavaScript函数。

<!--函数组件-->
function Welcome(props){
  return <h1>Hello,{props.name}</h1>;
}
<!--class组件-->
class Welcome extends React.Component{
  render(){
    return <h1>Hello,{this.props.name}</h1>;
  }
}
<!--上述两个组件等效-->

注意事项

React组件和React元素关系密切，React组件最核心的作用是返回React元素。虽然React元素是由React.createElement()返回的，但是React.createElement()函数本身也需要有被调用的来源，而React组件就是负责调用React.createElement()并返回React元素，以供React内部将其直接渲染成最终的页面DOM。

参考文献

深入解析React中的元素、组件、实例和节点
元素渲染
组件 & Props