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

刘切切 發表於 2023-2-27 08:16:00

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

<h1>一、概要</h1>
 React是用于构建用户界面的MVVM框架。
<h2>1.1、介绍</h2>
<code>React</code> 是 <code>Facebook</code> 开发的一款 <code>JavaScript</code> 库，而 <code>React</code> 被建造是因为 <code>Facebook</code> 认为市场上所有的 <code>JavaScript MVC</code> 框架都不能满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得 <code>MVC</code> 很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的 <code>MVC</code> 正在土崩瓦解。2011 年 <code>Facebook</code> 软件工程师 <code>Jordan Walke</code> 创建了 <code>React</code> ，并且首次使用 <code>Facebook</code> 的 <code>Newsfeed</code> 功能。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。
<img src="https://img2023.cnblogs.com/blog/63651/202212/63651-20221221144756664-854197697.png" alt="" width="568" height="239" loading="lazy">
React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。
<div class="cnblogs_code">
<pre>Instagram（照片墙，简称：ins或IG）是一款运行在移动端上的社交应用，以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。</pre>
</div>
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。
官网：https://zh-hans.reactjs.org/
源码：https://github.com/facebook/react
 React新文档：（https://beta.reactjs.org/）（开发中....）
<h2>1.2、React的特点</h2>
a、声明式设计 react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己会去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。
<div class="cnblogs_code">
<pre>命令式编程描述代码如何工作，告诉计算机一步步地执行、先做什么后做什么，在执行完之前,计算机并不知道我要做什么,为什么这么做.它只是一步一步地执行了。

声明式编程表明想要实现什么目的，应该做什么，但是不指定具体怎么做。</pre>
</div>
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没有组件化编码方案，代码复用低
<h2>1.3、React相关技术</h2>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
React可以开发Web应用—ReactJs
</li>
<li class="md-list-item">
React可以开发移动端—React-native
<ul>
<li class="md-list-item">React Native 是一个使用JavaScript 和 React 来编写跨终端移动应用（Android 或 IOS）的一种解决方案</li>
</ul>
</li>
<li class="md-list-item md-focus-container">
React可以开发VR应用—React 360
<ul>
<li class="md-list-item md-focus-container">React 360是一个创建3D和VR用户交互的框架.构建在React的基础之上，React是一个简化复杂UI创建的库，React 360可以让你用相似的工具和概念在网页上创建沉浸式的360度的内容。其特点：
<ul>
<li>
React 360 是一个用于构建VR全景360体验的网页应用框架，基于React
</li>
<li>
React 360 提供了一些控件，用于快速创建360度沉浸式的内容
</li>
<li>
跨平台，支持电脑、移动设备、VR设备
</li>
<li>
支持多种格式的全景视频
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>二、第一个React程序</h1>
<h2> 2.1、Web端</h2>
实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：
<ul>
<li>react.min.js - React 的核心库</li>
<li>react-dom.min.js - 提供与 DOM 相关的功能</li>
<li>babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。</li>
</ul>
CDN引入：https://unpkg.com/  https://www.staticfile.org/
可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。
<div class="gatsby-highlight" data-language="html">
<pre class="gatsby-code-html"><code class="gatsby-code-html"><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></code></pre>
</div>
上述版本仅用于开发环境，不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用：
<div class="gatsby-highlight" data-language="html">
<pre class="gatsby-code-html"><code class="gatsby-code-html"><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></code></pre>
</div>
如果需要加载指定版本的 <code class="gatsby-code-text">react</code> 和 <code class="gatsby-code-text">react-dom</code>，可以把 <code class="gatsby-code-text">18</code> 替换成所需加载的版本号。
<div class="cnblogs_code">
<pre><!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属性信息,)
 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></pre>
</div>
效果：
<img src="https://img2023.cnblogs.com/blog/63651/202212/63651-20221221145405137-932467677.png" alt="" width="401" height="122" loading="lazy">
注意：在react中，JavaScript代码部分里面如果涉及到DOM的class属性操作，不要直接使用<code>class</code>，因为<code>class</code>是es6里面的关键词，react里面需要使用<code>className</code>进行替换
<div class="cnblogs_code">
<pre>1 const vNode = React.createElement("div", {id: "hi",className: "cls"}, "hello world");</pre>
</div>
<h2>2.2、JSX</h2>
由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写XML（HTML）格式的代码。 优势：声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率。 JSX 是 React 的核心内容。
　　React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。
<ul>
<ul>
<li>React不一定非要使用JSX，但它有以下优点：
<ul>
<li>JSX执行更快，因为它在编译为JavaScript代码后进行了优化</li>
<li>它是类型安全的，在编译过程中就能发现错误</li>
<li>声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速度</li>

</ul>

</li>
<li>JSX语法：
<ul>
<li>定义虚拟DOM时，不要用引号 </li>
<li>标签中混入js表达式时要用{}</li>
<li>样式的类名指定不要用class，要用className</li>
<li>内联样式，要用style={{key: value}}的形式去写</li>
<li>只有一个根标签</li>
<li>标签必须闭合</li>
<li>标签首字母：
<ul>
<li>小写字母开头，则会将标签转为html中同名标签，若html标签中无对应的同名元素，编译会报错 </li>
<li>大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错</li>

</ul>

</li>

</ul>

</li>

</ul>

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

</ul>
<div class="cnblogs_code">
<pre><!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">
 // 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></pre>
</div>
运行结果：
<img src="https://img2023.cnblogs.com/blog/63651/202212/63651-20221222192432660-1775317785.png" alt="" width="332" height="97" loading="lazy">
添加属性
<div class="cnblogs_code">
<pre><!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">
 // 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></pre>
</div>
调用javascript中的方法
<div class="cnblogs_code">
<pre><!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>

<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></pre>
</div>
事件处理：
<div class="cnblogs_code">
<pre><!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></pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230224144501540-27082581.png" alt="" width="1078" height="195" loading="lazy">
<h2>2.3、脚手架</h2>
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不可以
虽然在本地搭建环境要费一些时间，但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤：
<ol>
<li>确保你安装了较新版本的 Node.js。</li>
<li>按照 Create React App 安装指南创建一个新的项目</li>
</ol>
<div class="gatsby-highlight" data-language="bash">
<pre class="gatsby-code-bash"><code class="gatsby-code-bash">npx create-react-app my-app</code></pre>
</div>
<ol start="3">
<li>删除掉新项目中 <code class="gatsby-code-text">src/</code> 文件夹下的所有文件。</li>
</ol>
<blockquote>
注意：
不要删除整个 <code class="gatsby-code-text">src</code> 文件夹，删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文件。
</blockquote>
<div class="gatsby-highlight" data-language="bash">
<pre class="gatsby-code-bash"><code class="gatsby-code-bash">cd my-app
cd src

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

# 如果你使用 Windows:
del *

# 然后回到项目文件夹
cd ..</code></pre>
</div>
<ol start="4">
<li>在 <code class="gatsby-code-text">src/</code> 文件夹中创建一个名为 <code class="gatsby-code-text">index.css</code> 的文件，并拷贝这些 CSS 代码。</li>
<li>在 <code class="gatsby-code-text">src/</code> 文件夹下创建一个名为 <code class="gatsby-code-text">index.js</code> 的文件，并拷贝这些 JS 代码。</li>
<li>拷贝以下三行代码到 <code class="gatsby-code-text">src/</code> 文件夹下的 <code class="gatsby-code-text">index.js</code> 文件的顶部：</li>
</ol>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx">import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';</code></pre>
</div>
现在，在项目文件夹下执行 <code class="gatsby-code-text">npm start</code> 命令，然后在浏览器访问 <code class="gatsby-code-text">http://localhost:3000</code>。这样你就可以在浏览器中看见一个空的井字棋的棋盘了。
2.项目结构
<img src="https://img2022.cnblogs.com/blog/2767346/202204/2767346-20220409203054214-1664858880.png">
3.启动项目
我们只需要在项目根目录下使用 npm start 或者 yarn start 就可以启动项目。
react17的ReactDOM.render()用法
<pre class="highlighter-hljs hljs JavaScript">import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render((
<h1>Hello World</h1>
),
document.getElementById('root')
)
</pre>
react18的ReactDOM.createRoot的用法。
<pre class="highlighter-hljs hljs JavaScript">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>)</pre>
<img src="https://img2023.cnblogs.com/blog/63651/202212/63651-20221222193559709-549229461.png" alt="" loading="lazy">
脚手架create-react-app创建的react项目，已经集成了webpack，只要运行命令： <code>npm run build</code> 项目就会编译成功，生成一个build文件夹，现在问题来了，如何启动这个项目呢。
我们看到命令执行完了，会给一个操作提示如下图：
<img src="https://img2024.cnblogs.com/blog/63651/202401/63651-20240101165555701-786022432.png" alt="" width="596" height="435" loading="lazy">
首先提醒我们要在package.json里面加上主页，接着就是全局安装serve：<code>npm install -g serve</code>
serve安装成功了以后，运行<code>serve -s build</code> 项目就启动起来了，它的固定端口是5000；那么我们想改动端口怎么办呢？运行下面的命令就可以用指定的端口启动项目了：
<code>serve -l 2000 -s build</code> //从2000端口启动项目
修改index.js文件
<div class="cnblogs_code">
<pre>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);</pre>
</div>
运行结果：
<img src="https://img2023.cnblogs.com/blog/63651/202212/63651-20221222194335191-1553411729.png" alt="" width="304" height="92" loading="lazy">
<h2>2.4、使用Vite创建React项目</h2>
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230227100747093-1808299204.png" alt="" loading="lazy">
 
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230227103624928-1476462692.png" alt="" loading="lazy">
Parsing error: '>' expected.eslint
vscode左下角齿轮设置, 删除eslint.validate中的html
<h1>三、开发工具与插件</h1>
<h2>3.1、安装React开发调试插件</h2>
不采用自动构建，直接为 crx 文件（直接拖入浏览器即可）。点击即可下载！【秘钥：dv6e】
<ol>
<li>进入到【谷歌扩展程序】界面。在谷歌浏览器直接输入： chrome://extensions/   即可进去扩展程序界面。</li>
<li>把 .crx 结尾的文件拖入浏览器即可。（如下图1）</li>
<li>运行 react 项目，打开控制台，就可以看到了。（如下图2）</li>
</ol>
图一：
<img src="https://img2022.cnblogs.com/blog/1601073/202211/1601073-20221124002043670-324045110.png" alt="" width="1071" height="398" class="medium-zoom-image">
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230207095815543-694040038.png" alt="" loading="lazy">
图二：
<img src="https://img2022.cnblogs.com/blog/1601073/202211/1601073-20221124002224357-522064265.png" alt="" width="1246" height="266" class="medium-zoom-image">
 <img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230207100350490-1125614561.png" alt="" loading="lazy">
<h2>3.2、安装VSCode插件</h2>
<h3>3.2.1、React/Redux/React-Native snippets 代码模板/代码片段</h3>
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230207105153402-197288964.png" alt="" loading="lazy">
｛｝和（）中的每一个空格都意味着这将被推入下一行：）$表示制表符之后的每一步。
TypeScript有自己的组件和代码段。在每个组件代码段之前使用搜索或键入ts。
<h4 dir="auto">Basic Methods</h4>
<table>
<thead>
<tr><th align="right">Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td align="right"><code>imp→</code></td>
<td><code>import moduleName from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>imn→</code></td>
<td><code>import 'module'</code></td>
</tr>
<tr>
<td align="right"><code>imd→</code></td>
<td><code>import { destructuredModule } from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>ime→</code></td>
<td><code>import * as alias from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>ima→</code></td>
<td><code>import { originalName as aliasName} from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>exp→</code></td>
<td><code>export default moduleName</code></td>
</tr>
<tr>
<td align="right"><code>exd→</code></td>
<td><code>export { destructuredModule } from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>exa→</code></td>
<td><code>export { originalName as aliasName} from 'module'</code></td>
</tr>
<tr>
<td align="right"><code>enf→</code></td>
<td><code>export const functionName = (params) => { }</code></td>
</tr>
<tr>
<td align="right"><code>edf→</code></td>
<td><code>export default (params) => { }</code></td>
</tr>
<tr>
<td align="right"><code>ednf→</code></td>
<td><code>export default function functionName(params) { }</code></td>
</tr>
<tr>
<td align="right"><code>met→</code></td>
<td><code>methodName = (params) => { }</code></td>
</tr>
<tr>
<td align="right"><code>fre→</code></td>
<td><code>arrayName.forEach(element => { }</code></td>
</tr>
<tr>
<td align="right"><code>fof→</code></td>
<td><code>for(let itemName of objectName { }</code></td>
</tr>
<tr>
<td align="right"><code>fin→</code></td>
<td><code>for(let itemName in objectName { }</code></td>
</tr>
<tr>
<td align="right"><code>anfn→</code></td>
<td><code>(params) => { }</code></td>
</tr>
<tr>
<td align="right"><code>nfn→</code></td>
<td><code>const functionName = (params) => { }</code></td>
</tr>
<tr>
<td align="right"><code>dob→</code></td>
<td><code>const {propName} = objectToDescruct</code></td>
</tr>
<tr>
<td align="right"><code>dar→</code></td>
<td><code>const = arrayToDescruct</code></td>
</tr>
<tr>
<td align="right"><code>sti→</code></td>
<td><code>setInterval(() => { }, intervalTime</code></td>
</tr>
<tr>
<td align="right"><code>sto→</code></td>
<td><code>setTimeout(() => { }, delayTime</code></td>
</tr>
<tr>
<td align="right"><code>prom→</code></td>
<td><code>return new Promise((resolve, reject) => { }</code></td>
</tr>
<tr>
<td align="right"><code>cmmb→</code></td>
<td><code>comment block</code></td>
</tr>
<tr>
<td align="right"><code>cp→</code></td>
<td><code>const { } = this.props</code></td>
</tr>
<tr>
<td align="right"><code>cs→</code></td>
<td><code>const { } = this.state</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">React</h4>
<table>
<thead>
<tr><th align="right">Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td align="right"><code>imr→</code></td>
<td><code>import React from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>imrd→</code></td>
<td><code>import ReactDOM from 'react-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imrc→</code></td>
<td><code>import React, { Component } from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>imrpc→</code></td>
<td><code>import React, { PureComponent } from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>imrm→</code></td>
<td><code>import React, { memo } from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>imrr→</code></td>
<td><code>import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbr→</code></td>
<td><code>import { BrowserRouter as Router} from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbrc→</code></td>
<td><code>import { Route, Switch, NavLink, Link } from react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbrr→</code></td>
<td><code>import { Route } from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbrs→</code></td>
<td><code>import { Switch } from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbrl→</code></td>
<td><code>import { Link } from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imbrnl→</code></td>
<td><code>import { NavLink } from 'react-router-dom'</code></td>
</tr>
<tr>
<td align="right"><code>imrs→</code></td>
<td><code>import React, { useState } from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>imrse→</code></td>
<td><code>import React, { useState, useEffect } from 'react'</code></td>
</tr>
<tr>
<td align="right"><code>redux→</code></td>
<td><code>import { connect } from 'react-redux'</code></td>
</tr>
<tr>
<td align="right"><code>est→</code></td>
<td><code>this.state = { }</code></td>
</tr>
<tr>
<td align="right"><code>cdm→</code></td>
<td><code>componentDidMount = () => { }</code></td>
</tr>
<tr>
<td align="right"><code>scu→</code></td>
<td><code>shouldComponentUpdate = (nextProps, nextState) => { }</code></td>
</tr>
<tr>
<td align="right"><code>cdup→</code></td>
<td><code>componentDidUpdate = (prevProps, prevState) => { }</code></td>
</tr>
<tr>
<td align="right"><code>cwun→</code></td>
<td><code>componentWillUnmount = () => { }</code></td>
</tr>
<tr>
<td align="right"><code>gdsfp→</code></td>
<td><code>static getDerivedStateFromProps(nextProps, prevState) { }</code></td>
</tr>
<tr>
<td align="right"><code>gsbu→</code></td>
<td><code>getSnapshotBeforeUpdate = (prevProps, prevState) => { }</code></td>
</tr>
<tr>
<td align="right"><code>sst→</code></td>
<td><code>this.setState({ })</code></td>
</tr>
<tr>
<td align="right"><code>ssf→</code></td>
<td><code>this.setState((state, props) => return { })</code></td>
</tr>
<tr>
<td align="right"><code>props→</code></td>
<td><code>this.props.propName</code></td>
</tr>
<tr>
<td align="right"><code>state→</code></td>
<td><code>this.state.stateName</code></td>
</tr>
<tr>
<td align="right"><code>rcontext→</code></td>
<td><code>const $1 = React.createContext()</code></td>
</tr>
<tr>
<td align="right"><code>cref→</code></td>
<td><code>this.$1Ref = React.createRef()</code></td>
</tr>
<tr>
<td align="right"><code>fref→</code></td>
<td><code>const ref = React.createRef()</code></td>
</tr>
<tr>
<td align="right"><code>bnd→</code></td>
<td><code>this.methodName = this.methodName.bind(this)</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">React Native</h4>
<table>
<thead>
<tr><th align="right">Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td align="right"><code>imrn→</code></td>
<td><code>import { $1 } from 'react-native'</code></td>
</tr>
<tr>
<td align="right"><code>rnstyle→</code></td>
<td><code>const styles = StyleSheet.create({})</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">Redux</h4>
<table>
<thead>
<tr><th align="right">Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td align="right"><code>rxaction→</code></td>
<td><code>redux action template</code></td>
</tr>
<tr>
<td align="right"><code>rxconst→</code></td>
<td><code>export const $1 = '$1'</code></td>
</tr>
<tr>
<td align="right"><code>rxreducer→</code></td>
<td><code>redux reducer template</code></td>
</tr>
<tr>
<td align="right"><code>rxselect→</code></td>
<td><code>redux selector template</code></td>
</tr>
<tr>
<td align="right"><code>rxslice→</code></td>
<td><code>redux slice template</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">PropTypes</h4>
<table>
<thead>
<tr><th align="right">Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td align="right"><code>pta→</code></td>
<td><code>PropTypes.array</code></td>
</tr>
<tr>
<td align="right"><code>ptar→</code></td>
<td><code>PropTypes.array.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptb→</code></td>
<td><code>PropTypes.bool</code></td>
</tr>
<tr>
<td align="right"><code>ptbr→</code></td>
<td><code>PropTypes.bool.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptf→</code></td>
<td><code>PropTypes.func</code></td>
</tr>
<tr>
<td align="right"><code>ptfr→</code></td>
<td><code>PropTypes.func.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptn→</code></td>
<td><code>PropTypes.number</code></td>
</tr>
<tr>
<td align="right"><code>ptnr→</code></td>
<td><code>PropTypes.number.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>pto→</code></td>
<td><code>PropTypes.object</code></td>
</tr>
<tr>
<td align="right"><code>ptor→</code></td>
<td><code>PropTypes.object.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>pts→</code></td>
<td><code>PropTypes.string</code></td>
</tr>
<tr>
<td align="right"><code>ptsr→</code></td>
<td><code>PropTypes.string.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptnd→</code></td>
<td><code>PropTypes.node</code></td>
</tr>
<tr>
<td align="right"><code>ptndr→</code></td>
<td><code>PropTypes.node.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptel→</code></td>
<td><code>PropTypes.element</code></td>
</tr>
<tr>
<td align="right"><code>ptelr→</code></td>
<td><code>PropTypes.element.isRequired</code></td>
</tr>
<tr>
<td align="right"><code>pti→</code></td>
<td><code>PropTypes.instanceOf(name)</code></td>
</tr>
<tr>
<td align="right"><code>ptir→</code></td>
<td><code>PropTypes.instanceOf(name).isRequired</code></td>
</tr>
<tr>
<td align="right"><code>pte→</code></td>
<td><code>PropTypes.oneOf()</code></td>
</tr>
<tr>
<td align="right"><code>pter→</code></td>
<td><code>PropTypes.oneOf().isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptet→</code></td>
<td><code>PropTypes.oneOfType()</code></td>
</tr>
<tr>
<td align="right"><code>ptetr→</code></td>
<td><code>PropTypes.oneOfType().isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptao→</code></td>
<td><code>PropTypes.arrayOf(name)</code></td>
</tr>
<tr>
<td align="right"><code>ptaor→</code></td>
<td><code>PropTypes.arrayOf(name).isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptoo→</code></td>
<td><code>PropTypes.objectOf(name)</code></td>
</tr>
<tr>
<td align="right"><code>ptoor→</code></td>
<td><code>PropTypes.objectOf(name).isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptsh→</code></td>
<td><code>PropTypes.shape({ })</code></td>
</tr>
<tr>
<td align="right"><code>ptshr→</code></td>
<td><code>PropTypes.shape({ }).isRequired</code></td>
</tr>
<tr>
<td align="right"><code>ptany→</code></td>
<td><code>PropTypes.any</code></td>
</tr>
<tr>
<td align="right"><code>ptypes→</code></td>
<td><code>static propTypes = {}</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">Console</h4>
<table>
<thead>
<tr><th>Prefix</th><th>Method</th></tr>
</thead>
<tbody>
<tr>
<td><code>clg→</code></td>
<td><code>console.log(object)</code></td>
</tr>
<tr>
<td><code>clo→</code></td>
<td><code>console.log(`object`, object)</code></td>
</tr>
<tr>
<td><code>clj→</code></td>
<td><code>console.log(`object`, JSON.stringify(object, null, 2))</code></td>
</tr>
<tr>
<td><code>ctm→</code></td>
<td><code>console.time(`timeId`)</code></td>
</tr>
<tr>
<td><code>cte→</code></td>
<td><code>console.timeEnd(`timeId`)</code></td>
</tr>
<tr>
<td><code>cas→</code></td>
<td><code>console.assert(expression,object)</code></td>
</tr>
<tr>
<td><code>ccl→</code></td>
<td><code>console.clear()</code></td>
</tr>
<tr>
<td><code>cco→</code></td>
<td><code>console.count(label)</code></td>
</tr>
<tr>
<td><code>cdi→</code></td>
<td><code>console.dir</code></td>
</tr>
<tr>
<td><code>cer→</code></td>
<td><code>console.error(object)</code></td>
</tr>
<tr>
<td><code>cgr→</code></td>
<td><code>console.group(label)</code></td>
</tr>
<tr>
<td><code>cge→</code></td>
<td><code>console.groupEnd()</code></td>
</tr>
<tr>
<td><code>ctr→</code></td>
<td><code>console.trace(object)</code></td>
</tr>
<tr>
<td><code>cwa→</code></td>
<td><code>console.warn</code></td>
</tr>
<tr>
<td><code>cin→</code></td>
<td><code>console.info</code></td>
</tr>
</tbody>
</table>
<h4 dir="auto">React Components</h4>
<h3 dir="auto"><code>rcc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { Component } from 'react'

export default class FileName extends Component {
render() {
return <div>$2</div>
}
}</pre>
</div>
<h3 dir="auto"><code>rce</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { Component } from 'react'

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

export default $1</pre>
</div>
<h3 dir="auto"><code>rcep</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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</pre>
</div>
<h3 dir="auto"><code>rpc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { PureComponent } from 'react'

export default class FileName extends PureComponent {
render() {
return <div>$2</div>
}
}</pre>
</div>
<h3 dir="auto"><code>rpcp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

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

render() {
return <div>$2</div>
}
}</pre>
</div>
<h3 dir="auto"><code>rpce</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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</pre>
</div>
<h3 dir="auto"><code>rccp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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>
}
}</pre>
</div>
<h3 dir="auto"><code>rfcp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'
import PropTypes from 'prop-types'

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

$1.propTypes = {}

export default $1</pre>
</div>
<h3 dir="auto"><code>rfc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'

export default function $1() {
return <div>$0</div>
}</pre>
</div>
<h3 dir="auto"><code>rfce</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'

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

export default $1</pre>
</div>
<h3 dir="auto"><code>rafcp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'
import PropTypes from 'prop-types'

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

$1.propTypes = {}

export default $1</pre>
</div>
<h3 dir="auto"><code>rafc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'

export const $1 = () => {
return <div>$0</div>
}</pre>
</div>
<h3 dir="auto"><code>rafce</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'

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

export default $1</pre>
</div>
<h3 dir="auto"><code>rmc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { memo } from 'react'

export default memo(function $1() {
return <div>$0</div>
})</pre>
</div>
<h3 dir="auto"><code>rmcp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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</pre>
</div>
<h3 dir="auto"><code>rcredux</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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)</pre>
</div>
<h3 dir="auto"><code>rcreduxp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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)</pre>
</div>
<h3 dir="auto"><code>rfcredux</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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)</pre>
</div>
<h3 dir="auto"><code>rfreduxp</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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)</pre>
</div>
<h3 dir="auto"><code>reduxmap</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}</pre>
</div>
<h4 dir="auto">React Native Components</h4>
<h3 dir="auto"><code>rnc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class FileName extends Component {
render() {
return (
 <View>
 <Text> $2 </Text>
 </View>
)
}
}</pre>
</div>
<h3 dir="auto"><code>rnf</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'
import { View, Text } from 'react-native'

export default function $1() {
return (
<View>
 <Text> $2 </Text>
</View>
)
}</pre>
</div>
<h3 dir="auto"><code>rnfs</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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({})</pre>
</div>
<h3 dir="auto"><code>rnfe</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'
import { View, Text } from 'react-native'

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

export default $1</pre>
</div>
<h3 dir="auto"><code>rnfes</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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({})</pre>
</div>
<h3 dir="auto"><code>rncs</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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({})</pre>
</div>
<h3 dir="auto"><code>rnce</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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</pre>
</div>
<h4 dir="auto">Others</h4>
<h3 dir="auto"><code>cmmb</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/</pre>
</div>
<h3 dir="auto"><code>desc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>describe('$1', () => {
$2
})</pre>
</div>
<h3 dir="auto"><code>test</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>test('should $1', () => {
$2
})</pre>
</div>
<h3 dir="auto"><code>tit</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>it('should $1', () => {
$2
})</pre>
</div>
<h3 dir="auto"><code>stest</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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()
})
})</pre>
</div>
<h3 dir="auto"><code>srtest</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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()
})
})</pre>
</div>
<h3 dir="auto"><code>sntest</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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()
})
})</pre>
</div>
<h3 dir="auto"><code>snrtest</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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()
})
})</pre>
</div>
<h3 dir="auto"><code>hocredux</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>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))</pre>
</div>
<h3 dir="auto"><code>hoc</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto">
<pre>import React from 'react'
import PropTypes from 'prop-types'

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

hocComponent.propTypes = {}

return hocComponent
}</pre>
</div>
<h3>3.2.2、Simple React Snippets 更加简洁的代码片段</h3>
<h3><img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230207111215610-1770506289.png" alt="" loading="lazy"></h3>
<h4 id="snippets">Snippets</h4>
<table>
<thead>
<tr><th>Snippet</th><th>Renders</th></tr>
</thead>
<tbody>
<tr>
<td><code>imr</code></td>
<td>Import React</td>
</tr>
<tr>
<td><code>imrc</code></td>
<td>Import React / Component</td>
</tr>
<tr>
<td><code>imrd</code></td>
<td>Import ReactDOM</td>
</tr>
<tr>
<td><code>imrs</code></td>
<td>Import React / useState</td>
</tr>
<tr>
<td><code>imrse</code></td>
<td>Import React / useState useEffect</td>
</tr>
<tr>
<td><code>impt</code></td>
<td>Import PropTypes</td>
</tr>
<tr>
<td><code>impc</code></td>
<td>Import React / PureComponent</td>
</tr>
<tr>
<td><code>cc</code></td>
<td>Class Component</td>
</tr>
<tr>
<td><code>ccc</code></td>
<td>Class Component With Constructor</td>
</tr>
<tr>
<td><code>cpc</code></td>
<td>Class Pure Component</td>
</tr>
<tr>
<td><code>ffc</code></td>
<td>Function Component</td>
</tr>
<tr>
<td><code>sfc</code></td>
<td>Stateless Function Component (Arrow function)</td>
</tr>
<tr>
<td><code>cdm</code></td>
<td>componentDidMount</td>
</tr>
<tr>
<td><code>uef</code></td>
<td>useEffect Hook</td>
</tr>
<tr>
<td><code>cwm</code></td>
<td>componentWillMount</td>
</tr>
<tr>
<td><code>cwrp</code></td>
<td>componentWillReceiveProps</td>
</tr>
<tr>
<td><code>gds</code></td>
<td>getDerivedStateFromProps</td>
</tr>
<tr>
<td><code>scu</code></td>
<td>shouldComponentUpdate</td>
</tr>
<tr>
<td><code>cwu</code></td>
<td>componentWillUpdate</td>
</tr>
<tr>
<td><code>cdu</code></td>
<td>componentDidUpdate</td>
</tr>
<tr>
<td><code>cwun</code></td>
<td>componentWillUnmount</td>
</tr>
<tr>
<td><code>cdc</code></td>
<td>componentDidCatch</td>
</tr>
<tr>
<td><code>gsbu</code></td>
<td>getSnapshotBeforeUpdate</td>
</tr>
<tr>
<td><code>ss</code></td>
<td>setState</td>
</tr>
<tr>
<td><code>ssf</code></td>
<td>Functional setState</td>
</tr>
<tr>
<td><code>usf</code></td>
<td>Declare a new state variable using State Hook</td>
</tr>
<tr>
<td><code>ren</code></td>
<td>render</td>
</tr>
<tr>
<td><code>rprop</code></td>
<td>Render Prop</td>
</tr>
<tr>
<td><code>hoc</code></td>
<td>Higher Order Component</td>
</tr>
<tr>
<td><code>cp</code></td>
<td>Context Provider</td>
</tr>
<tr>
<td><code>cpf</code></td>
<td>Class Property Function</td>
</tr>
</tbody>
</table>
<h1>四、作业</h1>
4.1、在Web端完成一个输出Hello World信息到网页的程序，非JSX。
4.2、在Web端完成一个输出Hello World信息到网页的程序，使用JSX。
4.3、使用脚手架创建一个React项目，使用VSCode打开，动态显示当前日期时间，每秒显示一次，安装好开发者工具（React Developer Tools）,安装好代码提示片段插件。
4.4、完成一个购物车：
<img src="https://img2023.cnblogs.com/blog/63651/202302/63651-20230207112145836-1656884302.png" alt="" loading="lazy">
4.5、将官网首页的demo复现。https://zh-hans.reactjs.org/
<h1>五、视频</h1>
  https://www.bilibili.com/video/BV1Vb411D7qa/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a 
来源：https://www.cnblogs.com/best/p/16992998.html

頁: [1]

琼殿技术论坛's Archiver

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