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

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

组件要求：

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

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

 

首先要导入React 和

ReactDOM：

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

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

function Ws(){  return 
我是一个函数定义的组件
; } ReactDOM.render(
      ,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 
      
       我是class定义的一个组件
      
  } } ReactDOM.render(
      ,window.root);

 

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

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

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

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

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