08==》创建组件以 1类的形式 或者以 2函数的形式

09==》使用组件
在src下创建components文件夹 是放组件的
CompType.js 组件 组件开头大写(重要)
CompType.js文件如下 import React from "react" //一定要导入React
// 函数类型去创建组件
export function Web1(){
return <div>我是以函数的形式创建的组件</div>
} // 以类的形式创建组件
export class Web2 extends React.Component{
render(){
return <div>我是类组件</div>
}
}
使用组件
// 导入组件 在一个文件中导入了两个组件哈
import {Web1,Web2} from "./components/CompType" {/* 使用组件 */}
<Web1></Web1>
<Web2></Web2> 函数式组件与类组件的区别
函数式组件只负责 展示 不负责业务逻辑
类组件 负责负责的业务逻辑

React 以两种形式去创建组件 类或者函数(二)的更多相关文章

  1. C++:一般情况下,设计函数的形参只需要两种形式

    C++:一般情况下,设计函数的形参只需要两种形式.一,是引用形参,例如 void function (int &p_para):二,是常量引用形参,例如 void function(const ...

  2. 基于 Scrapy-redis 两种形式的分布式爬虫

    基于 Scrapy-redis 两种形式的分布式爬虫 .caret, .dropup > .btn > .caret { border-top-color: #000 !important ...

  3. Controller@实现Controller的两种形式

    实现Controller的两种形式 形式1:仅仅实现IController接口,自定义Controller对Request的实现.形式2:在实现IController接口以后,继承Controller ...

  4. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  5. SQL 关于apply的两种形式cross apply 和 outer apply(转)

    转载链接:http://www.cnblogs.com/shuangnet/archive/2013/04/02/2995798.html apply有两种形式: cross apply 和 oute ...

  6. SQL 关于apply的两种形式cross apply 和 outer apply

    SQL 关于apply的两种形式cross apply 和 outer apply 例子: CREATE TABLE [dbo].[Customers]( ) COLLATE Chinese_PRC_ ...

  7. SQL关于apply的两种形式cross apply和outer apply(转载)

    SQL 关于apply的两种形式cross apply 和 outer apply   apply有两种形式: cross apply 和 outer apply   先看看语法:   <lef ...

  8. 在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编

    在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编 ...

  9. 在sql中case子句的两种形式

    case子句,在select后面可以进行逻辑判断. 两种形式:判断相等.判断不等 一.判断相等的语法: case 列名 when ...  then ... when ...  then ... el ...

随机推荐

  1. Spring Boot 异常处理静止trace

    概述 在spring boot 2.2 中 默认状态为status 999 private void addStatus(Map<String, Object> errorAttribut ...

  2. Jmeter 查看结果树之界面功能介绍 [8]

    查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...

  3. 操作MyBatis引发Error setting null for parameter #X with JdbcType OTHER .无效的列类型

    再用MyBatis操作Oracle的时候,传入null值而引发的错误 异常信息: org.springframework.jdbc.UncategorizedSQLException: Error s ...

  4. Linux下安装及使用mysql

    (注:本人在centos7进行的安装及使用) 1.安装wget yum install wget 2.下载mysql安装包 wget http://repo.mysql.com/mysql57-com ...

  5. JS数组去掉某一个元素

    /**数组去掉某一个元素**/ Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index &g ...

  6. vue定义全局date过滤器(自定义JS文件模块和Moment.js库)

    自定义dateFormat.js文件模块 dateFormat.js /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-0 ...

  7. java之对象类型转换

    基本数据类型之间的转换: 自动类型转换:小的数据类型可以自动转换成大的数据类型: 强制类型转换:可以把大的数据类型转换成小的数据类型:float = (float)32.0; public class ...

  8. Python函数(函数定义、函数调用)用法详解

    Python 中,函数的应用非常广泛,前面章节中我们已经接触过多个函数,比如 input() .print().range().len() 函数等等,这些都是 Python 的内置函数,可以直接使用. ...

  9. 【docker构建】基于docker构建wordpress博客网站平台

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. WordPre ...

  10. Java题库——Chapter11 继承和多态

    1)Analyze the following code: public class Test { public static void main(String[ ] args) { B b = ne ...