什么是react组件

什么是react组件

组件就是页面上的一部分。我们可以把一个大的网页拆分成很多小的部分。比如标题部分,对应一个组件,就是标题组件。搜索部分,对应的组件就是搜索组件。页面上很多区域也可以拆分成组件,所以页面就被拆分成了很多个组件。一个页面很复杂,有时候很难编写,但当我们把他拆分成组件的时候,再来维护这些小组件的时候就比较简单了。这就是我们前端组件化的概念。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

比如在index.js这个入口文件中, import App from './App';就是一个组件,打开这个组件

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className="App">
        hello world
      </div>
    );
  }
}
export default App;

这就是一个最基础的react组件的定义。

当我们定义一个react组件的时候,我们看是怎么定义的,首先我们通过es6的写法定义了一个类。这个类继承了React下面的Component这个类。所以当一个类继承了React,Component这个类的时候,他就是一个react的组件了。所以当要去定义一个组件的时候,只要继承这个React下面Coponent这个类就可以了。接着往下看,这下面有个render方法,这个方法需要返回一个内容。我们说组件是页面的一部分,那么这个组件的内容由render函数决定,render函数返回什么,那么这个组件就返回什么内容。然后我们通过export default这种语法导出出去。

原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

Image placeholder
前端答疑
未设置
  84人点赞

没有讨论,发表一下自己的看法吧

推荐文章
怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何开发react组件库

如何开发react组件库技术栈:React+Webpack+TypeScript+Docz先上脚手架目录结构docz:docz文档生成器的配置目录example:demo目录lib:打包后生成文件目录

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

Stack Overflow 上最火的一个问题:什么是 NullPointerException

在逛StackOverflow的时候,发现最火的问题竟然是:什么是NullPointerException(java.lang.NullPointerException),它是由什么原因导致的,有没有

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

什么是刻意练习?

刻意练习,不是简单的重复又重复。 “刻意练习”的概念要这样分开理解,“刻意”什么?“练习”什么?“刻意”就是持续做自己不会的事情,比如这章节的知识点没弄明白,我就要去行动起来去弄明白,如查文档,看点评

基础信息:什么是 MySQL?

MySQL是一个开源的深受欢迎的关系型数据库管理系统(简称RDBMS)。目前排名第二,仅次于Oracle数据库。 MySQL可以免费下载,但是,还提供了几个付费版本,这些版本提供了附加功能。 顾名思义

Kubernetes 基础信息:什么是 Kubernetes?

简介 Kubernetes(常简称为K8s,在希腊语意为“舵手”或“驾驶员”)是用于自动部署、扩展和管理容器化(containerized)应用程序的开源系统。 由JoeBeda、BrendanBur

Linux/Unix 基础:什么是 Linux?

简单来讲,Linux是一个操作系统(OS)。我们都很熟悉其他操作系统,就像Microsoftwindows,AppleMacOS,iOS,Googleandroid,等等这些,linux就像它们一样,

面试题:请解释一下什么是虚拟内存?

内存对于用户来说就是一个字节数组,我们可以根据地址来访问到某个字节或者某些字节:很久之前的内存很久很久之前,一台机器上只放置一个程序,操作系统仅仅作为一个函数库存在。对于内存来说,除去操作系统的代码和

一座岛告诉你,什么是智慧!

华为中国生态伙伴大会2019已落下帷幕,两天的时间,华为向大家展示了什么是智慧,什么才是真正的数字世界,当然还有那座仅用30天打造的一座“智慧岛”。

什么是边缘计算及其重要性?

边缘计算正在改变世界上数百万台设备处理,处理和传递数据的方式。联网设备(IoT)的爆炸性增长,以及需要实时计算能力的新应用,继续推动着边缘计算系统的发展。诸如5G无线之类的更快的联网技术,使边缘计算系

什么是Vue-CLI?

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included

什么是jquery插件?

什么是jquery插件?jQuery插件,就是开发爱好者自己利用Jquery制作的特效,然后经过封包或包装处理成js文件,发布到网上供大家使用的脚本集合。通常这类插件除了调用jQuery库文件,还需要

HTML 什么是内联元素?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

css什么是雪碧图?

css雪碧图即CSSSprite,又称CSS精灵,也被称为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图

什么是vue.js混入?

混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例: Vue测试实例