ES7+ React/Redux/GraphQL/React-Native snippets 使用指南
VS Code React Snippets 使用指南
目录
- 简介
- 基础方法
- React 相关
- React Native 相关
- Redux 相关
- PropTypes 相关
- 控制台相关
- React 组件相关
简介
ES7+ React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件,它提供了大量用于 React 开发的代码模板。
官网:[https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets]
安装方法
- 打开 VS Code
- 按下
Ctrl+P(Windows) 或Cmd+P(Mac) - 输入
ext install rodrigovallades.es7-react-js-snippets
支持的文件类型
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
基础方法
导入导出
| 前缀 | 方法 |
|---|---|
imp→ | import moduleName from 'module' |
imn→ | import 'module' |
imd→ | import { destructuredModule } from 'module' |
ime→ | import * as alias from 'module' |
ima→ | import { originalName as aliasName} from 'module' |
exp→ | export default moduleName |
exd→ | export { destructuredModule } from 'module' |
exa→ | export { originalName as aliasName} from 'module' |
函数相关
// anfn→ 箭头函数
(params) => { }// nfn→ 命名函数
const functionName = (params) => { }// dob→ 解构对象
const {propName} = objectToDescruct// dar→ 解构数组
const [propName] = arrayToDescruct
React 相关
导入语句
// imr→ 导入 React
import React from 'react'// imrd→ 导入 ReactDOM
import ReactDOM from 'react-dom'// imrc→ 导入 React 和 Component
import React, { Component } from 'react'// imrcp→ 导入 React、Component 和 PropTypes
import React, { Component } from 'react'
import PropTypes from 'prop-types'
生命周期方法
// cdm→ componentDidMount
componentDidMount = () => { }// cdup→ componentDidUpdate
componentDidUpdate = (prevProps, prevState) => { }// cwun→ componentWillUnmount
componentWillUnmount = () => { }
React 组件相关
类组件
// rcc→ 类组件
import React, { Component } from 'react'export default class FileName extends Component {render() {return <div>$2</div>}
}// rce→ 类组件带导出
import React, { Component } from 'react'export class FileName extends Component {render() {return <div>$2</div>}
}export default FileName
函数组件
// rfce→ 函数组件带导出
import React from 'react'function FileName() {return <div>$0</div>
}export default FileName// rafc→ 箭头函数组件
import React from 'react'const FileName = () => {return <div>$0</div>
}export default FileName
PropTypes 相关
类型定义
// pta→ PropTypes.array
PropTypes.array// ptar→ PropTypes.array.isRequired
PropTypes.array.isRequired// ptb→ PropTypes.bool
PropTypes.bool// ptbr→ PropTypes.bool.isRequired
PropTypes.bool.isRequired// pts→ PropTypes.string
PropTypes.string// ptsr→ PropTypes.string.isRequired
PropTypes.string.isRequired
Redux 相关
// rxaction→ Redux Action
export const actionName = (payload) => ({type: 'ACTION_TYPE',payload
})// rxconst→ Redux Constant
export const ACTION_TYPE = 'ACTION_TYPE'// rxreducer→ Redux Reducer
const initialState = {}export default (state = initialState, { type, payload }) => {switch (type) {case typeName:return { ...state, ...payload }default:return state}
}
React Native 相关
// rnc→ React Native 类���件
import React, { Component } from 'react'
import { View, Text } from 'react-native'export default class FileName extends Component {render() {return (<View><Text>$2</Text></View>)}
}// rncs→ React Native 类组件带样式
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'export default class FileName extends Component {render() {return (<View><Text>$2</Text></View>)}
}const styles = StyleSheet.create({})
控制台相关
// clg→ console.log
console.log(object)// clo→ console.log object with name
console.log('object', object)// ctr→ console.trace
console.trace(object)// cwa→ console.warn
console.warn(object)// cin→ console.info
console.info(object)
最佳实践
- 使用快捷键提高开发效率
- 熟记常用的代码片段前缀
- 根据项目需求选择合适的代码片段
- 配合 VS Code 的其他功能使用
注意事项
- 代码片段中的
$1,$2等表示光标位置 - 使用 Tab 键在不同位置之间切换
- 某些代码片段可能需要根据项目实际情况修改
- 建议先了解代码片段的完整内容再使用
相关文章:
ES7+ React/Redux/GraphQL/React-Native snippets 使用指南
VS Code React Snippets 使用指南 目录 简介基础方法React 相关React Native 相关Redux 相关PropTypes 相关控制台相关React 组件相关 简介 ES7 React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件,它提供了大量用于 React 开发的代…...
【ARM】PK51关于内存模式的解析与区别
1、 文档目标 解决PK51中三种内存模式所对应的不同场景选择。 2、 问题场景 在PK51中有三种内存模型可以进行选择,但是这三种内存模型的具体作用以及应用场景大部分工程师都不太清楚。 图2-1 3、软硬件环境 1)、软件版本:Keil PK51 9.60 …...
Linux高级--2.4.5 靠协议头保证传输的 MAC/IP/TCP/UDP---协议帧格式
任何网络协议,都必须要用包头里面设置写特殊字段来标识自己,传输越复杂,越稳定,越高性能的协议,包头越复杂。我们理解这些包头中每个字段的作用要站在它们解决什么问题的角度来理解。因为没人愿意让包头那么复杂。 本…...
【每日学点鸿蒙知识】输入法按压效果、web组件回弹、H5回退问题、Flex限制两行、密码输入自定义样式
1、HarmonyOS 输入法键盘按键的按压效果? 可以使用Button组件通过stateEffect属性设置按钮按下时是否开启按压态显示效果。参考链接如下: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-button-V5https:…...
制造BOM的应用思考
一、制造BOM的作用 制造BOM(Manufacturing BOM,MBOM)在制造过程中的应用非常广泛,具体包括以下几个方面: 1. 生产计划和调度: 制造BOM提供了生产过程中所需的所有输入及输出间的关系,包括材料、部品的数量、结构以及制程等信息。这些信息是生产拉动物料需求计划以及成本…...
嵌入式硬件杂谈(八)电源的“纹波”到底是什么?
纹波的引入:在我们嵌入式设备中,很多时候电路电源的纹波很敏感,纹波太大会导致系统不工作,因此设计一个纹波很小的电路就是我们的需求了。 电路的纹波是什么? 纹波(Ripple)是指电源输出中叠加在…...
保姆级教程Docker部署ClickHouse镜像
目录 1、安装Docker及可视化工具 2、创建挂载目录 3、运行ClickHouse容器 4、Compose运行ClickHouse容器 5、查看ClickHouse运行状态 1、安装Docker及可视化工具 Docker及可视化工具的安装可参考:Ubuntu上安装 Docker及可视化管理工具 2、创建挂载目录 # 创…...
【Rust自学】7.3. 路径(Path)Pt.2:访问父级模块、pub关键字在结构体和枚举类型上的使用
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 7.3.1. super 我们可以通过在路径开头使用super来访问父级模块路径中的内容,就像使用..语法启动文件系统路径。例如ÿ…...
【前端,TypeScript】TypeScript速成(七):数组与函数式编程相结合
数组与函数式编程相结合 使用函数式编程遍历数组 一个最简单的例子如下: const a [1, 2, 3, 4]a.forEach(v > {console.log(v) })由于此处使用了函数式编程,因此我们可以做一些比 console.log 更复杂的事情,比如将 a 中的数据放到另一…...
第十六届蓝桥杯模拟赛(第一期)(C语言)
判断质因数 如果一个数p是个质数,同时又是整数a的约数,则p称为a的一个质因数。 请问2024有多少个质因数。 了解 约数,又称因数。整数a整除整数b,b为a的因数(约数)质数,又称素数。只有1和它本身两…...
Linux应用软件编程-多任务处理(管道)
管道:进程间通信的文件 管道特点: 1. 读阻塞: 读端和写端都存在时, 当管道中无数据时,read阻塞等待读。 2. read到0:当所有的写端关闭,管道中有数据时,读到数据,无数据…...
如何在鸿蒙本地模拟器中使用HDC工具
引言 HDC是指华为设备连接(Huawei Device Connector)工具。它的作用类似Android开发的ADB工具。在华为鸿蒙(HarmonyOS)操作系统的开发过程中,HDC工具起到了至关重要的作用。它允许开发者在开发主机(如 PC&…...
《Vue进阶教程》第三十一课:ref的初步实现
往期内容: 《Vue进阶教程》第二十课:lazy懒执行 《Vue进阶教程》第二十一课:支持缓存 《Vue进阶教程》第二十二课:自定义更新(调度器) 《Vue进阶教程》第二十三课:渲染计算属性的结果 《Vue进阶教程》第二十四课&…...
C语言初阶习题【19】三子棋游戏
1.实现三子棋游戏 2.思路 我们把游戏实现部分放在game.c和game.h中,把游戏的测试代码放到test.c中 main函数在test.c中。 2.1 test.c中 先写main 函数,在main函数中调用test函数。 int main() {test();return 0; }test.c函数实现让玩家进行选择是否…...
Linux day 1129
家人们今天继续学习Linux,ok话不多说一起去看看吧 三.Linux常用命令 3.1 Linux命令体验 3.1.1 常用命令演示 在这一部分中,我们主要介绍几个常用的命令,让大家快速感 受以下 Linux 指令的操作方式。主要包含以下几个指令: ls命…...
【优化算法】梯度优化算法:一种新的原启发式优化算法算法
目录 1.摘要2.算法原理3.结果展示4.参考文献5.获取代码 1.摘要 本文提出了一种新型的元启发式优化算法——梯度优化器(Gradient-based Optimizer, GBO)。GBO算法灵感来源于牛顿法,采用两个主要操作:梯度搜索规则(Grad…...
内部类(3)
大家好,今天我们继续来看看内部类,今天我们来学习一下内部类的分类,我们来看看一共有几种,它们有什么作用,那么话不多说,我们直接开始。 9.1 内部类的分类 先来看下,内部类都可以在一个类的哪些位置进行定…...
svn分支相关操作(小乌龟操作版)
在开发工作中进行分支开发,涉及新建分支,分支切换,合并分支等 新建远程分支 右键选择branch/tagert按钮 命名分支的路径名称 点击确定后远程分支就会生成一个当时命名的文件夹(开发分支) 分支切换 一般在开发阶段&a…...
rust_shyper
title: 探索 Rust_Shyper:系统编程的新前沿 date: ‘2024-12-30’ category: blog tags: Rust_ShyperRust 语言系统编程性能与安全 sig: Virt archives: ‘2024-12’ author:way_back summary: Rust_Shyper 作为基于 Rust 语言的创新项目,在系统编程领域…...
HAL 库 HAL_UARTEx_ReceiveToIdle_IT 函数解析
一、存在位置:stm32f1xx_hal_uart.c 二、具体代码 二、返回值:HAL_StatusTypeDef 通过查看返回值HAL_StatusTypeDef在stm32f1xx_hal_edf.h文件中定义为结构体类型。 status:(进展的)状况,情形 三、函数名…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
