使用react定义组件的两种方式

react组件的两种方式：函数定义，类定义

在定义一个组件之前，首先要明白一点：react元素（jsx）是react组件的最基本的组成单位

组件要求：

1，为了和react元素进行区分，组件名字首必须大写

2、组件定以后，可以像jsx元素一样使用

 

首先要导入React 和 ReactDOM：

import React from 'react';
import ReactDOM from 'react-dom';

第一种 函数定义一个组件：

function Ws(){
  return <p>我是一个函数定义的组件</p>;
}
ReactDOM.render(<Ws/>,window.root);

定义 好的<Ws/>是<Ws></Ws>的简写 就是一个虚拟dom，是一个对象类型，里面包含定义组件时的一些值。

当使用函数定义好一个组件，使用ReactDOM.render函数将 (组件 :虚拟dom)转成真实的dom，并插入到页面。

第二中 使用类定义一个组件：

使用class定义组件的时候，首先要先从react中解构出React.Component,并继承它

import React {Component} from 'react';//解构React.Component

class He extends Component{ //继承Component，Component相当于React.Component 
 render(){ 
    return <div>我是class定义的一个组件</div>
  } 
}
ReactDOM.render(<He/>,window.root);

 

当组件是一个类定义的时候，执行ReactDOM.render函数的原理：

1、首先找到组件对应的类，并new了这个类的一个实例

2、通过实例找到原型上的render函数，让render执行

3、ReactDOM.render接收到原型上render函数retrun的虚拟的dom

4、将虚拟dom转换成真实dom，插入到页面中