react框架
react—webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
在webpack中一切文件都是模块
npm init 安装package . js
创建一个静态目录public 、一个动态目录src
全局安装:webpack
cnpm install webpack -g
cnpm install webpack-cli -g
然后在项目里面的根目录安装:
局部的cnpm install webpack -D
cnpm install webpack-cli -D
打包:
webpack —config xxx.config.js
启动本地服务:
cnpm install webpack-dev-server -D
cnpm install html-webpack-plugin -D
安装插件删除dist文件夹
cnpm install clean-webpack-plugin -D
引入插件,
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin(),
运行:npm run build 重新打包,会覆盖之前的dist <title><%= htmlWebpackPlugin.options.title %></title>
动态渲染:顶部名称
区分生产和开发:
安装区分块:cnpm install cross-env -D
Babel 是javaScript编译器
安装Babel
cnpm install babel-loader -D 形成加载作用
cnpm install @babel/core -D Babel核心库
cnpm install @babel/preset-env -D 编译ES6核心库
cnpm install @babel/preset-react -D react核心库
cnpm install react-dom -S
cnpm install file-loader -D 为加载图片
cnpm install style-loader -D 样式
cnpm install css-loader -D
cnpm install node-sass -D
cnpm install eslint-loader -D 检测代码规范
cnpm install eslint -D 真正检测
将报错像vue一样,将报错显示在视图上
overlay: {
warnings: true,
errors: true
}
免检测:
/*eslint-disable*/ 不想检测的代码放这里 /* eslint-enable*/
不想检测的代码放这里//eslint-disable-line
/*eslint no-console:0*/添加到不想检测的代码前面,但是添加后它的下面整体代码都不检测了
~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
环境完结
react项目开始:
用于构建用户界面的javaScript库
安装react
cnpm install react -S 用来定义组件
cnpm install react-dom -S 把一个组件渲染到真实DOM上
src中创建App.js 主键
安装:@babel/preset-react -D 用来编译react . jsx语法
jsx的理解:
jsx是变量;
jsx是对象类型;
jsx是可以嵌套;
jsx防止注入攻击
jsx是react的元素
jsx注释:{ /* 这是注释 */}
凡是变量,就需要花括号包裹住交给需要放在的地方
——————— State ——————
无状态组件(函数式组件):
就是没有state的react组件,没有生命周期等特性,也没有this
优势:渲染性能高、速度快
props:
这是父子组件之间通信的唯一纽带;
props是只读,不建议直接修改 ;
/
类组件:
有state,有this,有生命周期特性;
和无状态组件(函数式组件)相比,性能相对较少;
state的特点:
单向绑定,当state数据发生变化时视图自动更新,视图变化state是不变的;
单向数据流,数据只能向下传递,向子组件传递;
不能直接修改state声明式变量,要使用this.setState修改状态;
this.()是异步的,但在定时器中时它又是同步的;
当多个this.setState( ),react会把this.steState变成一个;
创建一个ES6的类:
class TestState extends React.Component{
构造器函数,当前组件被实例化时会调用该方法
cnostrutor ( props ){
super( props) //`super必须是构造器函数的第一行
}
----render是唯一不能少的生命周期,否则报错
render ( ) {
在return之前,你可以做任何的运算
return( )
}
}
—————事件绑定;
1、所以事件要以 on 开头,比如绑定click事件,’onClick’,绑定键盘事件:“onkeyUp’’
2、事件中的this,指向实例
3、两种绑定方式,
用ES5绑定事件:
es5方式要使用biod(this)改变this指向
最后一个参数,永远都是事件对象;
用ES6绑定事件:
要想拿到事件对象,必须在使用箭头函数进行传递;
e.stopPropagation ( ) ——阻止冒泡
e.preventDefault ( ) ——阻止默认事件
<div onClick = { this.clickHandle.bind(this) }>点击</div>//es5语法
<div onClick = { this.clickHandle }>点击</div>不常用,不建议用
<div onClick = { ()=>this.clickHandle () }>点击</div>//es6语法
键盘事件:οnkeyup={this.a.bind(this)}
获取键盘码:e.keyCode
如:a(e){
console.log(e.keyCode)}
———条件渲染
——————列表
———————————表单
react表单:默认是单向绑定的
受控表单:表单的输入由state声明式变量来控制
非受控表单:表单的输入和输出与state没有任何关系(尽量不用)
在受控表单中,【value / checked和 onChange 是一起使用的】
value用于给每个radio一个值,在e.target.value可以取
State & 生命周期
React的生命周期有三个阶段:
1、挂载阶段(3)
constructor (props) {
super(props) ——必须是第一行代码
this.state = {}
在这里不用使用this.statState( )
不要把props数据赋值给state
}
componentDidMount(){当DOM初始化渲染完成时
相当于vue中的mounted()
用于调接口
开启定时器、WebSocket长连接
}
render ( ){
渲染函数
return(
<div> 页面 </div>
)
}
constructor
componentDidMount
render
2、更新阶段(2)、
当state发生变化时,DOM更新完毕
shoudcomponentdidupdate(){
使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲,在大部分情况下你应该依赖于默认行为。
}
componentDidUpdate(){
相当于Vue中的updated
在这个方法执行之前,发生了DOM更新(先进行Diff运算,找出VM变化的最小差异,然后再通过真实的DOM操作来更新DOM
}
render ( ){
渲染函数
return(
<div> 页面 </div>
)
}
【特殊,工作基本用不到,但是面试问】
shouldComponentUpdate(){
是一个开关,用于控制组件的更新;可能会产生bug
一般仅用于性能优化,返回值是布尔值
return true
}
shoudcomponentdidupdate
componentDidUpdate
shouldComponentUpdate
特殊
3、卸载阶段(1)、
componentWillUnmount(){
当组件销毁时执行
相当于Vue中的deforeDestroy()
清除定时器,长连接
}
componentWillUnmount
组合 与 继承·
React有十分强大的组合模式。我们推荐使用组合
在任何一个React组件中,都有一个props.children
表示该组件内部包裹的其它所有子元素
没有继承这个说法
使用prop-types这个库来实现组件自定义属性的数据类型检测
cnpm install prop-types -S 代码检测
引入:import PropTypes from ‘prop-types’
高阶组件(HOC):也叫容器组件
是React中复用组件逻辑的一种高级技巧。
高阶组件是开发经验、设计模式
作用:实现组件业务逻辑的复用,比如当多个组件有相同的某些业务功能时,可以对这些重复的业务进行封装
用于修饰、装饰一个React的类
高阶组件返回值是一个新的React的类(组件)
特点:入参是一个React的类
Context
React上下文:
作用:用于在React组件树中自上而下地传递数据
怎么使用?
1、使用const aa = React.createContext( ) 创建React上下文对象(类)
2、在App中,用<aa.Provider value={ } > 把根组件包裹住
3、在组件中,使用.contextType 来接收上下文,使用this.context 访问上下文数据
Hooks:【只适用于函数式组件】
实际上是一套API,它可以让无状态组件(函数式组件)拥有像类组件一样的特性;
特性:state、生命周期、上下文、 ref ( 快捷的DOM操作)、
useState的语法:
const [ aa , bb ] = useState(初始值)
useEffect ( fn,[ ] )
相当于componentDidMount()的功能
这里可以调接口,开定时器
return()=>{ componentWillUnmount关闭定时器}
React路由:
在npm 搜索 react - router 官方网站
安装cnpm install react-router-dom -D
在React路由中,未被Route包裹的普通组件中,是没有路由API;
对那些没有被Route包裹的组件,要想使用路由API ?
。。要使用withRouter这个高阶组件来解决
代码分割;
@babel/plugin-syntax-dynamic-import -D
@loadable/component -S
@loadable/component :作用是代码分割
@babel/plugin-syntax-dynamic-import :作用是支持 ( )=>import ( )
这种语法。
Eslint-loader 检测代码———— 会读不懂Babel语法,需要安装
cnpm install babel-eslint -D
Babel-ESLint - 一个对Babel解析器的包装,使其能够与 ESLint 兼容。
也可以添加免检测:
/*eslint-disable*/ 不想检测的代码放这里 /* eslint-enable*/
状态管理工具:
一、React技术栈中的状态管理工具简介
√1、 flux 是 facebook官方提出的一种状态管理的解决方案(思想)
√2、 mobx 是基于flux思想而诞生的开源的状态工具
√3、X
二、如何定义mobx状态管理数据。
安装mobx:
cnpm install mobx -S
Src新建目录 - index.js
定义状态管理(mobx 5 的写法)
import { observble } from ‘mobx’
class Store{ @observble msg = ‘hello’}
export default new Store( ) //抛出
三、如何使用mobx状态管理数据?
在组件中使用mobx,需要安装mobx-react -S
##App.js
import { Provider } from ‘mobx-react’
import store from ‘···路径’
return( < / Provider>)
#Home.js
import { observer , inject } from ‘mobx-react’
@inject( ‘store’)
@observer
后面需要单独抛出Home
export default Home
四、如何支持ES6的装饰器语法?
安装:
@babel/plugin-proposal-class-properties -D
@babel/plugin-proposal-decorators -D
···配置文件;
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
在无状态组件中使用mobx
//装饰器,只能修饰class类及其属性和方法
安装ui组件库
cnpm install antd -S