Web前端
前端主流框架：
React
简介: 1.React是Facebook创建的JavaScript UI框架 新的语法——JSX(JavaScript混合着XML语法)
2.React的react-router和react-redux是由社区成员维护，它们都不是官方维护的。
3.React Native能在手机上创建原生应用，React在这方面处于领先位置。使用JavaScript, CSS和HTML创建原生移动应用，这是一个重要的革新。
创建项目：create-react-app 文件名
常用包：npm i axios mockjs redux react-redux react-router-dom react-loadable redux-thunk redux-logger --save
接口：cnpm run eject
起服务： npm start
React+TS
创建项目：create-react-app 文件名 --template typescript
常用包：npm i axios @types/axios mockjs @types/mockjs redux @types/redux react-redux @types/react-redux react-router-dom @types/react-router-dom react-loadable @types/react-loadable redux-thunk redux-logger @types/redux-logger moment better-scroll --save
起服务： npm start
Vue
简介: 1.Vue.js的作者尤雨溪曾说过，（Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。
2.Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。
3.Vue社区与阿里合作开发Vue版的React Native——Weex也很不错，但仍处于开发状态且并没经过实际项目的验证。
创建项目：vue create 文件名
常用包：npm i axios mockjs vue-router vuex vant --save
起服务：npm run serve
React与Vue存在很多相似之处：
他们都是JavaScript的UI框架，专注于创造前端的富应用。
React与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。
不同于早期的JavaScript框架“功能齐全”。
React 钩子函数：
componentWillReceiveProps( ){ } //专属props监听 state修改后不执行该钩子函数
shouldComponentUpdate( ){ } //react中唯一可以阻止是否需要重新渲染的生命周期
componentWillMount( ){ } //挂载前 不属于react存在期的钩子函数
render( ){ } //挂载结构
componentDidMount( ){ } //挂载完成
componentWillUpdate( ){ } //更新前
componentDidUpdata( ){ } //更新后 react存在期中不包含该钩子函数
componentWillUnmount( ){ } //卸载时
getDerivedStateFromProps( ){ } //代替了componentWillMount(){}、componentWillReceiveProps(){}、componentWillUpdate(){} （17.0版本后这三个钩子函数消失）必须有一个返回结果，否则报错
getSnapshotBeforeUpdate( ){ } //模块更新时所触发的钩子函数，该钩子函数需与componentDidUpdate 一起搭配使用，而且该函数得有一个返回值，虚拟DOM即将渲染成真实DOM的时候执行，在此方法中操作DOM最为准确，该钩子函数返回值会作为componentDidUpdate的第三个参数存在
setState 是一个异步方法 而且如果在同一操作中有多个setState的话，它会将多个合并成一个去执行
Context 创建成功之后的对象身上提供了两个模块
<Context.Provider><Context.Provider/> <Context.Consumer><Context.Consumer/> 的调用方式
Provider可以理解为是该跨级传参的一个入口模块 Consumer可以理解为是该跨级传参的一个出口模块
高阶函数 和 组件的关系：
高阶函数 一个函数去处理另一个函数的逻辑代码 (一个函数接收一个函数类型的参数或者时一个函数返回另一个函数的代码)
高阶函数是某一个函数返回的一个组件
被高阶组件包裹的模块视为隐式为其添加了一个父组件(这个父组件是高阶函数内部创建的)
类似数组的新方法 ===> map,filter,some,forEach,every等
调用时两个括号 a()() 称为柯里化高阶函数
普通函数this指向 调用者 箭头函数指向 作用域
. . . 扩展内容(引用类型) 赋值方式 浅拷贝
const 引用类型时候可以改值 不可以改引用
受控组件 eg:vlaue属性 搭配合成事件的onChange事件动态获取到input框中的内容 根据获取的内容动态修改value内容
withRouter 路由 单独提供的一个高阶组件 HOC 具体用处 帮助没有被Router绑定 组件 路由 提供
Vue 钩子函数：
beforeCreate 在实例初始化之后，data observer 和事件配置之前调用
created data已经初始化，计算属性、event/watch事件回调，但dom树并未挂载
beforeMount 在挂载前被调用render函数首次被调用生成虚拟dom
mounted 挂载完成，dom树已经完成渲染到页面，可进行dom操作
beforeUpdate 数据有更新被调用
updated 虚拟dom重新渲染补丁以最小dom开支来重新渲染dom
beforeDestroy 实例销毁之前调用在这还可以访问实例的数据
Destroyed 组件销毁后调用