React学习笔记（一）—— React快速入门

奋斗吧

擅长邻域：未填写

标签： React学习笔记（一）—— React快速入门 Python博客 51CTO博客

2023-05-04 18:24:10 238浏览

React学习笔记（一）—— React快速入门，一、概要React是用于构建用户界面的MVVM框架。1.1、介绍React 是 Facebook 开发的一款 JavaScript 库，而 React 被建造是因为 Facebook 认为市场上所有的 JavaScriptMVC 框架都不能满足他们的扩展需求，由于他们非常巨大的代码库和庞大

一、概要

React是用于构建用户界面的MVVM框架。

1.1、介绍

React 是 Facebook 开发的一款 JavaScript 库，而 React 被建造是因为 Facebook 认为市场上所有的 JavaScript MVC 框架都不能满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得 MVC 很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的 MVC 正在土崩瓦解。2011 年 Facebook 软件工程师 Jordan Walke 创建了 React ，并且首次使用 Facebook 的 Newsfeed 功能。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。

React学习笔记（一）—— React快速入门_html

React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。

Instagram（照片墙，简称：ins或IG）是一款运行在移动端上的社交应用，以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。

React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。

官网：https://zh-hans.reactjs.org/

源码：https://github.com/facebook/react

React新文档：（https://beta.reactjs.org/）（开发中....）

1.2、React的特点

a、声明式设计
react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己会去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。

命令式编程描述代码如何工作，告诉计算机一步步地执行、先做什么后做什么，在执行完之前,计算机并不知道我要做什么,为什么这么做.它只是一步一步地执行了。

声明式编程表明想要实现什么目的，应该做什么，但是不指定具体怎么做。

b、使用JSX语法

JSX (JavaScript XML) 是 JavaScript 语法的扩展。React 开发大部分使用 JSX 语法（在JSX中可以将HTML于JS混写）。

c、灵活

react所控制的dom就是id为root的dom，页面上的其他dom元素你页可以使用jq等其他框架。可以和其他库并存。

d、使用虚拟DOM、高效

虚拟DOM其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中（不需要整个DOM树重新渲染）。

e、组件化开发

通过 React 构建组件，使得代码更加容易得到复用和维护，能够很好的应用在大项目的开发中。

f、单向数据流

react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。这样让数据清晰代码容易维护。

1.原生JS操作DOM繁琐，效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案，代码复用低

1.3、React相关技术

React可以开发Web应用—ReactJs
React可以开发移动端—React-native

React Native 是一个使用JavaScript 和 React 来编写跨终端移动应用（Android 或 IOS）的一种解决方案

React可以开发VR应用—React 360

React 360是一个创建3D和VR用户交互的框架.构建在React的基础之上，React是一个简化复杂UI创建的库，React 360可以让你用相似的工具和概念在网页上创建沉浸式的360度的内容。其特点：

React 360 是一个用于构建VR全景360体验的网页应用框架，基于React
React 360 提供了一些控件，用于快速创建360度沉浸式的内容
跨平台，支持电脑、移动设备、VR设备
支持多种格式的全景视频

二、第一个React程序

2.1、Web端

实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

CDN引入：https://unpkg.com/ https://www.staticfile.org/

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

上述版本仅用于开发环境，不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

如果需要加载指定版本的 react 和 react-dom，可以把 18 替换成所需加载的版本号。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <script>
      // 1、创建虚拟dom
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM)
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM,DOM中的内容/子DOM,...)
      // React.createElement(标签名称,对象形式的DOM属性信息,[DOM中的内容/子DOM,DOM中的内容/子DOM,...])
      let vNode = React.createElement("h2", {}, "Hello React!");
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

效果：

React学习笔记（一）—— React快速入门_结点_02

注意：在react中，JavaScript代码部分里面如果涉及到DOM的class属性操作，不要直接使用class，因为class是es6里面的关键词，react里面需要使用className进行替换

1 const vNode = React.createElement("div", {id: "hi",className: "cls"}, "hello world");

2.2、JSX

由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写XML（HTML）格式的代码。
优势：声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率。
JSX 是 React 的核心内容。

　　React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。

React不一定非要使用JSX，但它有以下优点：

JSX执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速度

JSX语法：

定义虚拟DOM时，不要用引号
标签中混入js表达式时要用{}
样式的类名指定不要用class，要用className
内联样式，要用style={{key: value}}的形式去写
只有一个根标签
标签必须闭合
标签首字母：

小写字母开头，则会将标签转为html中同名标签，若html标签中无对应的同名元素，编译会报错
大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

在项目中尝试JSX最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库
<script>标签块中使用了JSX语法，则一定要申明类型type="text/babel"，否则babel将不进行解析jsx语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React JSX!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <!-- script标签上一定要写上 type="text/babel" -->
    <script type="text/babel">
      // 1、创建虚拟dom
      let vNode = <h2>Hello React JSX!</h2>;
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

运行结果：

React学习笔记（一）—— React快速入门_JSX_03

添加属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React JSX!</title>
    <style>
      .cls1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <!-- script标签上一定要写上 type="text/babel" -->
    <script type="text/babel">
      // 1、创建虚拟dom
      let vNode = <h2 className="cls1">Hello React JSX!</h2>;
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

调用javascript中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sss{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
        
    </div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>

<script src="../js/babel.min.js"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
        const MyId = "title";
        const MyData = "Cyk";
        // 1.创建虚拟DOM
        const VDOM = (
            <h1 id = {MyId.toLocaleUpperCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>sss</span>
            </h1>
        )
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));
</script>

</html>

事件处理：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <script type="text/babel">
      let clickHandler = (e) => {
        alert(e.target.innerHTML);
      };
      let title = "message";
      //创建虚拟DOM结点
      let vnode = (
        <div title={title.toUpperCase()} onClick={clickHandler}>
          <h2 style={{ color: "blue" }}>Hello React!</h2>
        </div>
      );
      let root = ReactDOM.createRoot(document.querySelector("#app"));
      root.render(vnode);
    </script>
  </body>
</html>

结果：

React学习笔记（一）—— React快速入门_JSX_04

2.3、脚手架

1.使用 create-react-app 脚手架创建项目

npx create-react-app 项目名或者 yarn create react-app 项目名(npx 是一个临时使用第三方模块的命令，会临时下载这个包，使用完毕就删除了)

npm和npx的区别

区别1.一个永久存在（npm），一个临时安装（npx），用完后删除

区别2.npx 会帮你执行依赖包里的二进制文件。也就是说 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去环境变量里面的 PATH 里找。如果依然找不到，就会帮你安装！

区别3.npx可以执行文件，但是npm不可以

虽然在本地搭建环境要费一些时间，但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤：

确保你安装了较新版本的 Node.js。
按照 Create React App 安装指南创建一个新的项目

npx create-react-app my-app

删除掉新项目中 src/ 文件夹下的所有文件。

注意：

不要删除整个 src 文件夹，删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文件。

cd my-app
cd src

# 如果你使用 Mac 或 Linux:
rm -f *

# 如果你使用 Windows:
del *

# 然后回到项目文件夹
cd ..

在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。
在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。
拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

现在，在项目文件夹下执行 npm start 命令，然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了。

2.项目结构

3.启动项目

我们只需要在项目根目录下使用 npm start 或者 yarn start 就可以启动项目。

react17的ReactDOM.render()用法

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render((
  <h1>Hello World</h1>
),
  document.getElementById('root')
)

react18的ReactDOM.createRoot的用法。

import React from 'react';
import ReactDOM from 'react-dom/client';
const rootEl = document.getElementById('root')
const root = ReactDOM.createRoot(rootEl)
root.render(<h1>Hello World</h1>)

React学习笔记（一）—— React快速入门_React_06

修改index.js文件

import ReactDOM from "react-dom/client";

//1、创建根结点
const root = ReactDOM.createRoot(document.getElementById("root"));
//2、创建虚拟DOM
const vNode = (
  <div>
    <h2>Hello React!</h2>
  </div>
);
//3、将虚拟DOM渲染到根结点上
root.render(vNode);

运行结果：

React学习笔记（一）—— React快速入门_html_07

2.4、使用Vite创建React项目

React学习笔记（一）—— React快速入门_html_08

React学习笔记（一）—— React快速入门_JSX_09

三、开发工具与插件

3.1、安装React开发调试插件

不采用自动构建，直接为 crx 文件（直接拖入浏览器即可）。点击即可下载！【秘钥：dv6e】

进入到【谷歌扩展程序】界面。在谷歌浏览器直接输入： chrome://extensions/ 即可进去扩展程序界面。
把 .crx 结尾的文件拖入浏览器即可。（如下图1）
运行 react 项目，打开控制台，就可以看到了。（如下图2）

图一：

React学习笔记（一）—— React快速入门_React_10

React学习笔记（一）—— React快速入门_html_11

图二：

React学习笔记（一）—— React快速入门_html_12

React学习笔记（一）—— React快速入门_JSX_13

3.2、安装VSCode插件

3.2.1、React/Redux/React-Native snippets 代码模板/代码片段

React学习笔记（一）—— React快速入门_html_14

｛｝和（）中的每一个空格都意味着这将被推入下一行：）$表示制表符之后的每一步。

TypeScript有自己的组件和代码段。在每个组件代码段之前使用搜索或键入ts。

Basic Methods

Prefix	Method
`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'`
`enf→`	`export const functionName = (params) => { }`
`edf→`	`export default (params) => { }`
`ednf→`	`export default function functionName(params) { }`
`met→`	`methodName = (params) => { }`
`fre→`	`arrayName.forEach(element => { }`
`fof→`	`for(let itemName of objectName { }`
`fin→`	`for(let itemName in objectName { }`
`anfn→`	`(params) => { }`
`nfn→`	`const functionName = (params) => { }`
`dob→`	`const {propName} = objectToDescruct`
`dar→`	`const [propName] = arrayToDescruct`
`sti→`	`setInterval(() => { }, intervalTime`
`sto→`	`setTimeout(() => { }, delayTime`
`prom→`	`return new Promise((resolve, reject) => { }`
`cmmb→`	`comment block`
`cp→`	`const { } = this.props`
`cs→`	`const { } = this.state`

React

Prefix	Method
`imr→`	`import React from 'react'`
`imrd→`	`import ReactDOM from 'react-dom'`
`imrc→`	`import React, { Component } from 'react'`
`imrpc→`	`import React, { PureComponent } from 'react'`
`imrm→`	`import React, { memo } from 'react'`
`imrr→`	`import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'`
`imbr→`	`import { BrowserRouter as Router} from 'react-router-dom'`
`imbrc→`	`import { Route, Switch, NavLink, Link } from react-router-dom'`
`imbrr→`	`import { Route } from 'react-router-dom'`
`imbrs→`	`import { Switch } from 'react-router-dom'`
`imbrl→`	`import { Link } from 'react-router-dom'`
`imbrnl→`	`import { NavLink } from 'react-router-dom'`
`imrs→`	`import React, { useState } from 'react'`
`imrse→`	`import React, { useState, useEffect } from 'react'`
`redux→`	`import { connect } from 'react-redux'`
`est→`	`this.state = { }`
`cdm→`	`componentDidMount = () => { }`
`scu→`	`shouldComponentUpdate = (nextProps, nextState) => { }`
`cdup→`	`componentDidUpdate = (prevProps, prevState) => { }`
`cwun→`	`componentWillUnmount = () => { }`
`gdsfp→`	`static getDerivedStateFromProps(nextProps, prevState) { }`
`gsbu→`	`getSnapshotBeforeUpdate = (prevProps, prevState) => { }`
`sst→`	`this.setState({ })`
`ssf→`	`this.setState((state, props) => return { })`
`props→`	`this.props.propName`
`state→`	`this.state.stateName`
`rcontext→`	`const $1 = React.createContext()`
`cref→`	`this.$1Ref = React.createRef()`
`fref→`	`const ref = React.createRef()`
`bnd→`	`this.methodName = this.methodName.bind(this)`

React Native

Prefix	Method
`imrn→`	`import { $1 } from 'react-native'`
`rnstyle→`	`const styles = StyleSheet.create({})`

Redux

Prefix	Method
`rxaction→`	`redux action template`
`rxconst→`	`export const $1 = '$1'`
`rxreducer→`	`redux reducer template`
`rxselect→`	`redux selector template`
`rxslice→`	`redux slice template`

PropTypes

Prefix	Method
`pta→`	`PropTypes.array`
`ptar→`	`PropTypes.array.isRequired`
`ptb→`	`PropTypes.bool`
`ptbr→`	`PropTypes.bool.isRequired`
`ptf→`	`PropTypes.func`
`ptfr→`	`PropTypes.func.isRequired`
`ptn→`	`PropTypes.number`
`ptnr→`	`PropTypes.number.isRequired`
`pto→`	`PropTypes.object`
`ptor→`	`PropTypes.object.isRequired`
`pts→`	`PropTypes.string`
`ptsr→`	`PropTypes.string.isRequired`
`ptnd→`	`PropTypes.node`
`ptndr→`	`PropTypes.node.isRequired`
`ptel→`	`PropTypes.element`
`ptelr→`	`PropTypes.element.isRequired`
`pti→`	`PropTypes.instanceOf(name)`
`ptir→`	`PropTypes.instanceOf(name).isRequired`
`pte→`	`PropTypes.oneOf([name])`
`pter→`	`PropTypes.oneOf([name]).isRequired`
`ptet→`	`PropTypes.oneOfType([name])`
`ptetr→`	`PropTypes.oneOfType([name]).isRequired`
`ptao→`	`PropTypes.arrayOf(name)`
`ptaor→`	`PropTypes.arrayOf(name).isRequired`
`ptoo→`	`PropTypes.objectOf(name)`
`ptoor→`	`PropTypes.objectOf(name).isRequired`
`ptsh→`	`PropTypes.shape({ })`
`ptshr→`	`PropTypes.shape({ }).isRequired`
`ptany→`	`PropTypes.any`
`ptypes→`	`static propTypes = {}`

Console

Prefix	Method
`clg→`	`console.log(object)`
`clo→`	console.log(`object`, object)
`clj→`	console.log(`object`, JSON.stringify(object, null, 2))
`ctm→`	console.time(`timeId`)
`cte→`	console.timeEnd(`timeId`)
`cas→`	`console.assert(expression,object)`
`ccl→`	`console.clear()`
`cco→`	`console.count(label)`
`cdi→`	`console.dir`
`cer→`	`console.error(object)`
`cgr→`	`console.group(label)`
`cge→`	`console.groupEnd()`
`ctr→`	`console.trace(object)`
`cwa→`	`console.warn`
`cin→`	`console.info`

React Components

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 $1

rcep

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class FileName extends Component {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default $1

rpc

import React, { PureComponent } from 'react'

export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>
  }
}

rpcp

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

rpce

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default FileName

rccp

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  }

  render() {
    return <div>$4</div>
  }
}

rfcp

import React from 'react'
import PropTypes from 'prop-types'

function $1(props) {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rfc

import React from 'react'

export default function $1() {
  return <div>$0</div>
}

rfce

import React from 'react'

function $1() {
  return <div>$0</div>
}

export default $1

rafcp

import React from 'react'
import PropTypes from 'prop-types'

const $1 = (props) => {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

rafc

import React from 'react'

export const $1 = () => {
  return <div>$0</div>
}

rafce

import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1

rmc

import React, { memo } from 'react'

export default memo(function $1() {
  return <div>$0</div>
})

rmcp

import React, { memo } from 'react'
import PropTypes from 'prop-types'

const $1 = memo(function $1(props) {
  return <div>$0</div>
})

$1.propTypes = {}

export default $1

rcredux

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rcreduxp

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  }

  render() {
    return <div>$4</div>
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfcredux

import React, { Component } from 'react'
import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfreduxp

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const FileName = () => {
  return <div>$4</div>
}

FileName.propTypes = {
  $2: $3,
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

reduxmap

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

React Native Components

rnc

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

rnf

import React from 'react'
import { View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

rnfs

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

const styles = StyleSheet.create({})

rnfe

import React from 'react'
import { View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

rnfes

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  )
}

export default $1

const styles = StyleSheet.create({})

rncs

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({})

rnce

import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    )
  }
}

export default $1

Others

cmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc

describe('$1', () => {
  $2
})

test

test('should $1', () => {
  $2
})

tit

it('should $1', () => {
  $2
})

stest

import React from 'react'
import renderer from 'react-test-renderer'

import { $1 } from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(<$1 {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

srtest

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'
import { $1 } from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />)
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

sntest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import $1 from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}

  const wrapper = renderer.create(<$1 {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

snrtest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import $1 from '../$1'

describe('<$1 />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <$1 {...defaultProps} />
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

hocredux

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = (state) => ({})

export const mapDispatchToProps = {}

export const $1 = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {}

  return hocComponent
}

export default (WrapperComponent) =>
  connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent))

hoc

import React from 'react'
import PropTypes from 'prop-types'

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {}

  return hocComponent
}

3.2.2、Simple React Snippets 更加简洁的代码片段

Snippets

Snippet	Renders
`imr`	Import React
`imrc`	Import React / Component
`imrd`	Import ReactDOM
`imrs`	Import React / useState
`imrse`	Import React / useState useEffect
`impt`	Import PropTypes
`impc`	Import React / PureComponent
`cc`	Class Component
`ccc`	Class Component With Constructor
`cpc`	Class Pure Component
`ffc`	Function Component
`sfc`	Stateless Function Component (Arrow function)
`cdm`	componentDidMount
`uef`	useEffect Hook
`cwm`	componentWillMount
`cwrp`	componentWillReceiveProps
`gds`	getDerivedStateFromProps
`scu`	shouldComponentUpdate
`cwu`	componentWillUpdate
`cdu`	componentDidUpdate
`cwun`	componentWillUnmount
`cdc`	componentDidCatch
`gsbu`	getSnapshotBeforeUpdate
`ss`	setState
`ssf`	Functional setState
`usf`	Declare a new state variable using State Hook
`ren`	render
`rprop`	Render Prop
`hoc`	Higher Order Component
`cp`	Context Provider
`cpf`	Class Property Function