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

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

使用react定义组件的两种方式相关推荐

React类组件的两种写法
react中类组件的两种写法: 要点:•类组件必须要继承React.Component •类组件中的render()方法,返回值是一个jsx // 方式一: import React from 're ...
Vue渲染组件的两种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
java jframe添加面板_JFrame添加组件的两种方式
对JFrame添加组件有两种方式:1) 用getContentPane()方法获得JFrame的内容面板,再对其加入组件:frame.getContentPane().add(childCompont ...
vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
定义字符串的两种方式
定义字符串的两种方式数组定义 char name[] = "answer" 指针定义 char *name = "answer" 比较字符数组里的字符可以修 ...
c语言向文件中写入字符串_C语言中定义字符串的两种方式及其比较
先看如下代码: 以上用两种方式定义一个字符串: 1.定义一个char * 类型指针,指向字符串首字符首地址. 2.定义一个数组,数组里存放元素为字符串各个字符+'0',其中'0'为码0值,编译器会自动 ...
深入解析React创建组件的三种方式
eact创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同 1.函数式无 ...
Spring定义Bean的两种方式：＜bean＞和@Bean
前言: Spring中最重要的概念IOC和AOP,实际围绕的就是Bean的生成与使用. 什么叫做Bean呢?我们可以理解成对象,每一个你想交给Spring去托管的对象都可以称之为Bean. 今天通过S ...
Qt Qml动态创建对象/组件的两种方式
Qml动态创建对象有两种方式: a.使用Loader b.使用javaScript 1.Loader加载机制: 加载过程: 通过source,来加载qml文件. 通过sourceComponent,来 ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...

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

使用react定义组件的两种方式相关推荐

最新文章

热门文章