React是用于构建用户界面的MVVM框架。
React
是 Facebook
开发的一款 JavaScript
库,而 React
被建造是因为 Facebook
认为市场上所有的 JavaScript MVC
框架都不能满足他们的扩展需求, 由于他们非常巨大的代码库和庞大的组织,使得 MVC
很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的 MVC
正在土崩瓦解。2011 年 Facebook
软件工程师 Jordan Walke
创建了 React
,并且首次使用 Facebook
的 Newsfeed
功能。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。
React起源于Facebook的内部项目,它是一个用于构建用户界面的javascript库,Facebook用它来架设公司的Instagram网站,并于2013年5月开源。
React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。
官网:https://zh-hans.reactjs.org/
源码:https://github.com/facebook/react
React新文档 :(https://beta.reactjs.org/)(开发中....)
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没有组件化编码方案,代码复用低
实例中我们引入了三个库: react.development.min.js 、react-dom.development.min.js 和 babel.min.js:
CDN引入:https://unpkg.com/ https://www.staticfile.org/
可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。
上述版本仅用于开发环境,不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用:
如果需要加载指定版本的 react
和 react-dom
,可以把 18
替换成所需加载的版本号。
效果:
注意:在react中,JavaScript代码部分里面如果涉及到DOM的class属性操作,不要直接使用class
,因为class
是es6里面的关键词,react里面需要使用className
进行替换
由于通过React.createElement()方法创建的React元素代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,开发时写代码很不友好。
JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写XML(HTML)格式的代码。 优势:声明式语法更加直观,与HTML结构相同,降低了学习成本、提升开发效率。 JSX 是 React 的核心内容。
React使用JSX来替代常规的JavaScript,JSX可以理解为的JavaScript语法扩展,它里面的标签申明要符合XML规范要求。
<script>
标签,引入解析jsx语法的babel类库<script>
标签块中使用了JSX语法,则一定要申明类型type="text/babel"
,否则babel将不进行解析jsx语法运行结果:
添加属性
调用javascript中的方法
事件处理:
结果:
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不可以
虽然在本地搭建环境要费一些时间,但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤:
src/
文件夹下的所有文件。注意: 不要删除整个
src
文件夹,删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文件。
src/
文件夹中创建一个名为 index.css
的文件,并拷贝这些 CSS 代码。src/
文件夹下创建一个名为 index.js
的文件,并拷贝这些 JS 代码。src/
文件夹下的 index.js
文件的顶部:现在,在项目文件夹下执行 npm start
命令,然后在浏览器访问 http://localhost:3000
。这样你就可以在浏览器中看见一个空的井字棋的棋盘了。
2.项目结构
3.启动项目
我们只需要在项目根目录下使用 npm start 或者 yarn start 就可以启动项目。
react17的ReactDOM.render()用法
react18的ReactDOM.createRoot的用法。
修改index.js文件
运行结果:
不采用自动构建,直接为 crx 文件(直接拖入浏览器即可)。点击即可下载!【秘钥:dv6e】
图一:
图二:
{}和()中的每一个空格都意味着这将被推入下一行:)$表示制表符之后的每一步。
TypeScript有自己的组件和代码段。在每个组件代码段之前使用搜索或键入ts。
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 |
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) |
Prefix | Method |
---|---|
imrn→ | import { $1 } from 'react-native' |
rnstyle→ | const styles = StyleSheet.create({}) |
Prefix | Method |
---|---|
rxaction→ | redux action template |
rxconst→ | export const $1 = '$1' |
rxreducer→ | redux reducer template |
rxselect→ | redux selector template |
rxslice→ | redux slice template |
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 = {} |
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 |
rcc
rce
rcep
rpc
rpcp
rpce
rccp
rfcp
rfc
rfce
rafcp
rafc
rafce
rmc
rmcp
rcredux
rcreduxp
rfcredux
rfreduxp
reduxmap
rnc
rnf
rnfs
rnfe
rnfes
rncs
rnce
cmmb
desc
test
tit
stest
srtest
sntest
snrtest
hocredux
hoc
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 |
4.1、在Web端完成一个输出Hello World信息到网页的程序,非JSX。
4.2、在Web端完成一个输出Hello World信息到网页的程序,使用JSX。
4.3、使用脚手架创建一个React项目,使用VSCode打开,动态显示当前日期时间,每秒显示一次,安装好开发者工具(React Developer Tools),安装好代码提示片段插件。
4.4、完成一个购物车:
4.5、将官网首页的demo复现。https://zh-hans.reactjs.org/