MVC模式
:model数据 view视图 controller控制
结合Redux框架去使用:Redux(M C)+Router( C )=MVC
0.三大特点
- 声明式:HTML风格,所见即所得
- 组件化:可复用
- 一次学习,随处编写:React可以开发pc端应用、h5应用、桌面应用、React Native App易用、嵌入式应用、VR。
1.React脚手架项目
1.1创建项目
npx
是node5.x版本以后支持的命令,可以不用全局安装
npx create-react-app 项目名
1.2启动项目
//进入项目文件夹
cd 项目名
//启动命令
yarn start
1.3项目目录
public
:静态资源目录
index.html
:入口文件
src
:源码目录
node_modules
:第三方依赖包文件夹
package.json
:npm配置文件
eslintcache
:lint配置文件
gitignore
:git忽略的文件或目录
README
.md:说明文档
1.4改造目录
将src里面的文件全部删除,添加index.js,这个是整个项目js的入口文件.
1.5创建hello Word
//在src/index.js创建helloWord
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建React元素
const el = <h3>helloWord</h3>
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
2.JSX语法
2.1JSX是什么
jsx = js + xml ( html 是 xml 的子集)= js + html
注意事项:
- 最外层需要根标签包裹
- jsx最好用小括号包裹
- 其他要求跟HTML一样
const el = (
<div>
<h3>helloWord</h3>
<h3>hello 山竹</h3>
</div>)
2.2jsx表达式
注释要在{}里面写,单行注释需要换行
普通表达式
undefined、布尔值、null不显示
//在src/index.js创建helloWord
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建React元素
const hello = (a, b) => a + b
let str = '我是变量'
const obj = {
name: '我是对象'
}
const el = (
<div>
{/* 数字 */}
{123}
<br></br>
{/* 字符串 */}
{'字符串'}
<br></br>
{/* 函数 */}
{hello(1, 2)}
<br></br>
{/* 变量 */}
{str}
<br></br>
{/* 对象 */}
{obj.name}
{/* 布尔值 */}
{true}
{/* undefined */}
{undefined}
{/* null */}
{null}
</div>)
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
数组表达式
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建React元素
const hero = ['安琪拉', '黄忠', '山竹', '周瑜']
const el = (
<div>
{/* v:代表当前遍历的元素
i:下标
a:hero */}
{/* 处理逻辑可以用下面这段 */}
{/* {hero.map((v, i, a) => {
console.log(v, i, a);
return (<h3 key={i}>{v}</h3>)
})} */}
{/* 简写版 */}
{hero.map((v, i, a) => <h3 key={i}>{v}</h3>)}
</div>)
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
2.3条件渲染
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建React元素
let hero = '杀生丸'
// 函数式
const isHero = (hero) => {
if (hero === '杀生丸') {
return (<h3>男</h3>)
}
return (<h3>女</h3>)
}
const el = (
<div>
{/* 简写 */}
{hero === '杀生丸' ? <h3>男</h3> : <h3>女</h3>}
{/* 调用 */}
{isHero(hero)}
</div>)
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
2.4行内样式
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建React元素
const el = (
<div>
{/* 样式属性是小驼峰式写法 */}
<h3 style={{ color: 'pink', textAlign: 'center' }}>我变成粉色了</h3>
</div>)
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
2.5外联样式
className命名
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 引入外联样式
import './index.css'
// 2.创建React元素
const el = (
<div>
{/* className命名 */}
<h3 className='redColor'>我变成红色了</h3>
</div>)
//3.将创建好的元素挂载到dom上
ReactDOM.render(el, document.getElementById('root'))
/* index.css */
.redColor {
color: red;
}
3.React组件创建
React有两种组件:函数式组件、类组件
两者的区别
1.创建方式
- 函数组件使用function创建
- 类组件使用class创建
2 .类组件有状态,函数组件没有状态
3. 类组件有声明周期,函数式组件没有
3.1函数式组件
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
// 2.创建函数组件
// 注意:要求大驼峰,需要return返回
function App() {
return '我是函数组件'
}
//3.将创建好的函数组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))
3.2类组件
//src/index.js
// 1.引入模块
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
// 2.创建类组件
// 注意:要求大驼峰,需要return返回
// 继承React.component父类
class App extends Component {
//实现render方法
render() {
//render方法中需要return语句
return <h3>我是类组件</h3>
}
}
//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))
3.3抽离组件代码到独立的js文件
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
//引入类组件
import App from './App.js'
//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))
// src/App.js
import React, { Component } from 'react'
class App extends Component {
render() {
return <h3>我是独立类组件</h3>
}
}
// 暴露
export default App
4.事件绑定
- 可以通过事件处理函数的参数获得事件对象
- React中的事件对象叫做:合成事件
- 合成事件:兼容所有浏览器,无需担心跨浏览器兼容问题
- 除兼容所有浏览器外,它还拥有和浏览器原生事件相同的接口,包括stopPropagation()和preventDefault()
- 如果你想获取原生事件对象,可以通过nativeEvent属性来进行获取
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
//引入类组件
import App from './App.js'
//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))
// src/App.js
import React, { Component } from 'react'
class App extends Component {
render() {
return (<div>
{/* 点击触发事件 */}
<button onClick={() => {
console.log('点我拉')
}}>按钮</button>
{/* 禁止跳转 */}
<a href='https://blog.csdn.net/weixin_47886687' onClick={(e) => {
e.preventDefault()
}}>禁止跳转</a>
</div>)
}
}
// 暴露
export default App
4.1支持的事件
-
Clipboard Events 剪切板事件
- 事件名 :onCopy onCut onPaste
- 属性 :DOMDataTransfer clipboardData
-
compositionEvent 复合事件
- 事件名: onCompositionEnd onCompositionStart onCompositionUpdate
- 属性: string data
-
Keyboard Events 键盘事件
- 事件名:onKeyDown onKeyPress onKeyUp
- 属性: 例如 number keyCode 太多就不一一列举
-
Focus Events 焦点事件 (这些焦点事件在 React DOM 上的所有元素都有效,不只是表单元素)
- 事件名: onFocus onBlur
- 属性: DOMEventTarget relatedTarget
-
Form Events 表单事件
- 事件名: onChange onInput onInvalid onSubmit
-
Mouse Events 鼠标事件
- 事件名:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
-
Pointer Events 指针事件
- 事件名:
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
-
Selection Events 选择事件
- 事件名:onSelect
-
Touch Events 触摸事件
- 事件名:onTouchCancel onTouchEnd onTouchMove onTouchStart
-
UI Events UI 事件
- 事件名: onScroll
-
Wheel Events 滚轮事件
-
事件名:onWheel
-
属性:
-
number deltaMode
number deltaX
number deltaY
number deltaZ
-
Media Events 媒体事件
-
事件名:
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
-
-
Image Events 图像事件
- 事件名:onLoad onError
-
Animation Events 动画事件
- 事件名:onAnimationStart onAnimationEnd onAnimationIteration
-
Transition Events 过渡事件
- 事件名:onTransitionEnd
-
Other Events 其他事件
- 事件名: onToggle
5.有状态组件和无状态组件
- 函数组件叫无状态组件,类组件又叫有状态组件
- 状态(state)即数据
- 函数组件没有自己的状态,只负责数据展示
- 类组件有自己的状态,负责更新UI,让页面动起来
5,1state和setstate
state基本使用
- state是组件内部的私有数据,只能在组件内部使用
- state的值时对象,表示一个组件中可以有多个数据
- 通过this.state来获取状态
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'
//引入类组件
import App from './App.js'
//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))
// src/App.js
import React, { Component } from 'react'
class App extends Component {
// 声明state
state = {
num: 0
}
render() {
return (<div>
{/* 获取状态 */}
<h3>{this.state.num}</h3>
{/* 点击触发事件 */}
<button onClick={() => {
console.log('点我拉');
}}>按钮</button>
</div>)
}
}
// 暴露
export default App
5.2setstate改变state状态
语法:this.setState({要改的数据})
setState()作用:1.修改state2.更新UI
思想:数据驱动视图
// src/App.js
import React, { Component } from 'react'
class App extends Component {
// 声明state
state = {
num: 0
}
render() {
return (<div>
{/* 获取状态 */}
<h3>{this.state.num}</h3>
{/* 点击触发事件 */}
<button onClick={() => {
// 通过setState修改num
this.setState({
num: this.state.num + 1
})
}}>按钮</button>
</div>)
}
}
// 暴露
export default App
点击可以变更