推荐阅读:https://www.jianshu.com/p/2726b8654989

1. createClass

已不推荐使用,这里不再多讲。但你仍需要了解它,因为你可能会接触到一些旧项目,或者一些旧的开源项目,这些项目大都采用createClass写法。

var AppComponent = React.createClass({
componentDidMount: function(){
// 一些逻辑
},
……
render:function(){
return (
<div> 返回值最外层必须是闭合标签 </div>
)
}
})

2. class组件

其实就是createClass的es6的写法。

import React  from 'react';
class AppComponent extends React.Component { // 定义一个继承于react顶层Component的新组件AppComponent
constructor(props){
super(props) // super,调用父类构造函数改变this指向
}
render(){
return <div>
返回值最外层必须是闭合标签
</div>
}
}

3. stateless 组件

所谓stateless组件,也就是无状态组件。
这种react组件有一个特点,它没有生命周期方法,没有render方法,连state也没有,this也没有,也不需要实例化。

stateless组件本质是一个函数,它没有生命周期,也不需要实例化,没有this指向, 更轻盈,性能更加好。

这种组件是所有react组件中性能最好的组件类型。官方也推荐多用这种组件。

多用作纯展示的组件使用。

const AppComponent = (props) =>{
// 一些逻辑
return <div>
这是一个干净纯洁的stateless组件
</div>
}

配合useState使用

import {useState} from 'react';

const AppComponent = (props) =>{
const initState = {name: 'test', age: 23}
const [myState, setMyState] = useState(initState);
// 一些逻辑
return <div onClick={setMyState={name: 'haha'}}>
{myState.name}
     {myState.age}
</div>
}

react的3种组件的更多相关文章

  1. React的几种组件

    一.函数组件 该函数在React中是一个有效的组件,可以接收唯一带有数据的props(代表属性)对象,并返回一个React元素.函数式组件要特别注意,组件名称首字母一定要大写.这种方式也成为无状态组件 ...

  2. react之四种组件中DOM样式设置方式

    1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件 ...

  3. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  4. React的第二种使用方法----脚手架方式

    一.React的第二种使用方法-----脚手架 1.前提:Node.js >8.10 2.下载全局脚手架工具 npm  i  -g  create-react-app 3.运行全局脚手架工具,创 ...

  5. react实战系列 —— react 的第一个组件

    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...

  6. 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  7. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  8. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  9. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

随机推荐

  1. Mybatis中使用association进行关联的几种方式

    这里以一对一单向关联为例.对使用或不使用association的配置进行举例.  实体类: @Data @ToString @NoArgsConstructor public class IdCard ...

  2. 软件平台ThinkSNS+软件系统研发日记

    NO.1: 实用开源软件安装部署是第一步, ThinkSNS+响应快速安装,易于二开基准,为大家录制了一份宝塔面板安装社交系统ThinkSNS+视频教程,点开观看视频一起吸一吸. 若无法播放,请直接打 ...

  3. Matlab模板模式

    在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.本文以数据库SQL语法为例来阐述模板模 ...

  4. nodeJS从入门到进阶三(MongoDB数据库)

    一.MongoDB数据库 1.概念 数据库(DataBase)是一个按照数据结构进行数据的组织,管理,存放数据的仓库. 2.关系型数据库 按照关系模型存储的数据库,数据与数据之间的关系非常密切,可以实 ...

  5. Vue.js的路由之——vue-router快速入门

    直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...

  6. Jenkins系列之-—DevOps高效插件推荐【转】

    基于Jenkins及其插件生态实现自己的持续交付与DevOps平台. jenkins 插件官网 Blue Ocean Jenkins2.7以后可安装,是Jenkins的一种新视图,能够通过图形化的界面 ...

  7. 尚学堂JAVA基础学习笔记

    目录 尚学堂JAVA基础学习笔记 写在前面 第1章 JAVA入门 第2章 数据类型和运算符 第3章 控制语句 第4章 Java面向对象基础 1. 面向对象基础 2. 面向对象的内存分析 3. 构造方法 ...

  8. laravel项目中通过nvmw安装node.js和npm 开发环境-- windows版

    windows版本安装 此教程执行的时候,网速一定要好.不然可能出现各种错误. 如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ git clone nvmw  直接从 githu ...

  9. 关于python模块总结

    名词解释 模块(module):在python中,一个.py文件就是一个模块 包(package):为了避免模块名冲突,Python又引入了按目录来组织模块的方法.当目录下存在__init__.py, ...

  10. [AI] 论文笔记 - U-Net 简单而又接近本质的分割网络

    越简单越接近本质. 参考资料 U-Net: Convolutional Networks for Biomedical Image Segmentation Abstract & Introd ...