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

最新推荐文章于 2025-06-17 13:34:35 发布

转载最新推荐文章于 2025-06-17 13:34:35 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinxinxiangrong7/p/9634330.html

文章标签：

#javascript #ViewUI

本文介绍了React中组件的两种定义方式：函数定义与类定义。详细解释了如何使用这两种方式创建React组件，以及如何通过ReactDOM.render将组件转换为实际DOM并插入页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，插入到页面中

转载于:https://www.cnblogs.com/xinxinxiangrong7/p/9634330.html