主流框架：react框架笔记、webpack环境搭建

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