随笔

1.gitlab

• gitlab-ci 是基于gitlab的持续继承工具。每次push到gitlab的时候就会触发一次脚本执行，脚本内容包括测试，编译，部署等. 解析gitlab-ci.yaml脚本
• gitlab-runner是脚本执行的承载者.
• 通过读取.gitlab-ci.yaml文件读取CI任务并进行对应的处理 .
  先定义stages（工作阶段，多个stages会按顺序执行build -> push -> deploy）
• pipline
  一次pipline相当于一次构建任务里面包含多个流程里面包含在gitlab-ci里面写的stages的流程

第一次新建项目构建的时候需要进入settings页面注册runners ,分配容器

2. react

生命周期：分为三个阶段：初始化 --》 挂在 --》 更新

constructor -> componentWillMount -> componentDidMount -> componentWillUnMount

componentWillReceiveProps -> shouldComponentUpdate -> componentDidUpdate -> render

新增：
前面要加上static保留字，声明为静态方法

• getDerivedStateFromProps:代替componentWillReceiveProps
  componentWillReceiveProps：通过判断前后props是否相同，如果不同就更新到对应的state上去，但是这样会破坏state数据的单一数据源导致组件状态变的不可预测，也会增加组件的重绘次数

getDerivedStateFromProps禁止组件访问this.props , 强制比较nextprops和prestate中的值，保证是根据当前的props来更新组件的state，确保state单一数据源。

• getSnapshotBeforeUpdate：代替componentWillUpdate
  componentWillUpdate:是在组件更新前，读取当前某个DOM元素状态，在componentDidUpdate中进行对应的处理。但是在react开启异步渲染模式后，在render阶段读取的DOm元素状态并不总和commit阶段相同，就会导致在didUpdate中使用Willupdate中读取的DOM元素状态不安全，值可能会失效
  getSnapshotBeforeUpdate会在最终render之前被调用，这样保证状态的一致，并且在此生命周期返回的任何值都将作为参数传递给didUpdate

2.2.react hooks

• 背景：组件之间的逻辑复用在class中比较复杂，一般都是通过高阶组件和render props,其本质就是讲复用逻辑提升到父组件中，但是这样会容易产生很多包装组件，各种嵌套。致使组件之间的逻辑变的复杂，容易产生 bug
• 优点：提高组件的逻辑复用，简化流程
  实现高阶组件的两种方式：属性代理 、 反向继承
  属性代理：继承component , 把高阶组件接受到的属性传递个给传进来的组件。可以通过refs获取组件的实例
  反向继承： 继承自传递过来的组件，主要用来做渲染劫持，在渲染方法中读取或者更改react element tree 或者有条件的渲染等
• react hooks

1. useState:状
   态钩子，为函数组件提供内部状态
2. useContent ： 共享钩子， 实现组件之间共享状态，react。creatContext()的返回结果作为参数，使用useContext就不在需要 provider和consumer
3. useReducer: Action钩子，提供状态管理，其基本原理是通过用户在页面发起action，从而荣光reducer改变state从而实现页面和状态的通信
   4.useEffect: 副作用钩子，接受两个参数，一个是进行的异步操作，第二个是数组，用来给出effect的依赖项
4. useRef: 获取组件的实例，渲染周期质检共享数据的存储，state不能存储跨渲染周期的数据，所有state的保存会触发组件的重新渲染，useRef传入一个参数initValue，并创建一个对象，给函数使用，在整个生命周期中改对象保持不变
5. useMemo和useCallback：可缓存函数的引用或者值，多用于优化 ， useMemo用在计算值的缓存，
6. useLayoutEffect:在所有的DOM变更之后同步调用effect可以使用它来读取DOM布局并同步触发重新渲染

// componentDidMount，必须加[],不然会默认每次渲染都执行
useEffect(()=>{
}, [])

// componentDidUpdate
useEffect(()=>{
document.title = `You clicked ${count} times`;
return()=>{
// 以及 componentWillUnmount 执行的内容       
}
}, [count])

useEffect是render结束后，callback函数执行，但是不会阻断浏览器的渲染，
但是在class的componentDidMout和componentDidupdate是同步的，在render结束后就运行，
useLayoutEffect里面的callback函数会在DOM更新完成后立即执行，但是会在浏览器进行任何绘制之前完成会阻塞浏览器的绘制

3. react Time Slicing(事件切片)

react 的异步渲染其实是拉长了render的事件，一次跑一点，所以机器性能很差，会看到react渲染时稍有延迟但是不卡顿。
timeSlice 得益于fiber使得在直线任务的期间可以随时暂停，跑去干别的事情，这个特效使得react能在性能机器查的机器上是任然泡池良好的性能
Suspense:主要解决网络IO问题，解决异步副作用的问题，调用render函数 -> 发现有异步请求 -> 悬停 ，等待异步请求结果 -> 渲染数据

4. jsx

jsx是js的一种语法扩展 javascript XML ， 类似模板语言，拥有js的全部功能 会被babek编译成React.createElement()，返回React.element对象.

5. react-router

• hashRouter , browserRouter,memeryRouter
  browsweRouter:history.pushState /history.replaceState
  hashRouter :location.hash = ** / location.replace()
  memeryRouter: 在内存中进行历史记录的存储
• 在history库的基础上实现了url和ui的同步

6. mobx

• 原理：通过observable观察某一个变量，当该变量产生变化是，对应autorun的回调函数会发生变化。
  通过observable使状态变得可观察，在某一数据被observable包装后，返回的是observable包装或的类型
• 流程 action -> state -> view
• 对比redux:
  redux将数据保存在单一store中，Mobx将数据保存在分散的多个store中。
  redux 需要手动dispatch(action)才能改变state , 状态不可变，纯函数 。mobx使用observable保存数据自动刷出 ， 状态可以直接修改，
  redux是函数式的，mobx是面向对象的

7. redux

• 流程dispatch(action) ->store调用 reducer 对传入的action，state 进行处理 -> 更新state -> 重新渲染
• 单一不可变store原则
• react-redux:
  provider:封装，向conect传递store
  connect:包装原组件 ， 将state 和action 通过props传递进去

8. webpack

1. webpack-dev-server:

• 本地开发服务器，支持热加载，接口代理等，原理其实就是启动一个express服务器，调用app.use(express.static(...))方法。express.static：生成静态资源路径
• 最直观的理解就是一个运行在内存中的文件系统，通过webpack.config文件，形成一个微型的文件映射系统，当程序请求文件时，其实是把内存中缓存的对应结果作为文件内容返回回来。最关键的中间件是webpack-dev-middleware:(生成一个与webpack的compiler绑定的中间件，在express中去调用。)
• 热加载的流程：webpack监听文件变化并打包 -> webpack-dev-middleware对静态文件监听(devServer.watchContentBase为true是会监听静态文件变化) ->devServer通知浏览器文件发生变化 -> webpack接受到最新hash值验证并请求模块代码 -> HotModuleReplacement.runtime对模块进行热更新 -> HotModulePlugin会对新旧模块进行对比
  参考：https://www.cnblogs.com/longlongdan/p/12391740.html

2. webpack
   静态模块打包工具，对有依赖关系的多个模块文件进行打包处理后，生成浏览器可以直接搞笑运行的资源
3. plugin/ loader

• source Map ：代码调试
• 优化性能：
  HappyPack:多线程加速编译 ，
  多入口情况下使用CommonsChunkPlugin提取公共代码
  配置externals提取常用库，
  通过webpack-uglify-parallel采用多核并行压缩提高来提高uglifyPlugin压缩速度，
  Tree-shaking取出多余js代码 css 是Purify-css
  利用DllPlugin对npm包进行预编译，DllReferencePlugin将预编译的模块加载进来
  利用CDN加速，在构建过程中利用output和loader中的publicPath参数修改资源路径

4. bundle:webpack打包出来的文件，
   chunk:代码块，用于代码分割和合并
   module:开发中的单个模块