git和其他总结

react生命周期

• 挂载阶段：
  constructor() -----> 初始化构造函数
  static getDerivedStateFromProps() -------->计算属性，必须有返回值，如果没有则return null
  return出来的值会合并到state中
  render() ---------> 渲染函数
  componentDidMount() ---------- 组件挂载完毕执行

• 更新阶段：
  static getDerivedStateFromProps()
  shouldComponentUpdate() ------>如果return true则执行render，否则不执行render
  render()

• 卸载阶段：

  componentWillUnmount()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DfZQifJh-1628514345655)(${media}\react生命周期.png)]

react获取dom节点

• react 15.8 版本之前

  ref属性写成字符串会导致内存泄露----->会导致节点的重复引用，而之前引用的节点无法解除引用，造成内存泄漏
  官方推荐使用一个函数,函数的参数是那个dom节点{this.dom = dom}

• react 16.0 版本之后

  React.creatRef() 这个api操作dom

react性能优化

1、shouldComponentUpdate

​ 两个参数，1、nextProps；2、nextState

2、pureComponent（纯组件）和memo 阻止组件不必要的更新

​ pureComponent需要确保state为不可变量

​ pureComponent实现了shouldComponentUpdate的浅比较

​ memo，包裹函数组件，第二个参数（可选，省略则浅比较）是回调函数，函数有两个参数，prevProps和NextProps， 返回true，表示props相等，不更新，否则返回false，更新组件（和shouldComponentUpdate相反，因为比较的东西不 同）

3、immutable.js ====数据操作自动返回新对象，实现不可变量

react原理

• vdom和diff算法===>patch函数（比对）和h函数（构建虚拟dom）

• 合成事件 ========> 17.0之前document，之后root

• setState和batchUpdate=====>异步同步，是否命中batchUpdate机制（可以被react管理就是异步，原生就是同步）（setState不可变量）

  transaction事物机制=====>
  -transaction.initialize()===>改isbatchUpdate为true
  -yourHandle()执行你的函数
  -transaction.close()===>改isbatchUpdate为false
  

• 组件渲染过程------讲生命周期

• react fiber
  组件渲染问题：js单线程，dom渲染共用，导致卡顿
  解决：reconciliation阶段进行任务拆分，dom需要渲染时暂停，空闲时间恢复
  使用的api window.requsetldleCallback()

• 路由原理：三大路由：hash，history，memoryRouter ( X )

  hash

​ history

react不可变量

从React渲染组件性能考虑，使用旧数据创建新数据时，要保证旧数据同时可用，
并且没有变化的部分还可用，目的是尽量减少不必要的渲染和重绘。

如果是简单的赋值给一个新的变量，新旧对象只是名称不同，不进行深比较js认为数据不变。其次，也会带来引入对象浅拷贝的问题，造成不可预测的展示值。
这对react响应重新渲染造成了性能影响，或不能及时更新dom。

shouldComponentUpdate 是因为 state值和setState值一样是也会触发更新，但是只到浅比较，对于深层结构没有效率。
但是做深层拷贝很耗时，于是这才有了Immutable 不可变数据，来提升组件render的效率。

react 路由

react-router ----> react-router-dom

react-router-dom依赖于react-router

BrowserRouter（history路由）作为路由的外层包裹

Route作为显示组件的视图组件
1、方法一：component ==> 传入一个类型（即一个组件。可以是类组件，也可以是一个函数组件）
2、方法二：render ===> 传入一个回调函数，返回一个dom节点
3、方法三：children ==> 设置一个dom节点
Link（NavLink）作为跳转路由的链接

withRouter（高阶组件） ===> 调用withRouter(组件) 可以使组件的props中有路由的三个属性

三个属性：location、history、match

Switch--------> 类似分支语句，匹配到一个之后不会继续往下匹配

Redirect =====>设置path为重定向前的路由，to为重定向后的路由 （Redirect标签一定要放在所有Route标签的最后面），也可以使用在Route的component中

路由传值：
（父路由传值到子路由）
1、方法一：动态路由传参---->match-params
2、方法二：state状态传参—>location-state
3、方法三：props传参（刷新页面数据会丢失）
（子路由传值到父路由）
1、方法一：非父子组件传值（发布订阅模式）
2、方法二：父子组件传值

react-router-config: 配置文件集中式管理路由

API:
renderRoutes,
matchRoutes

react路由原理

History

基于pushState和popstate两个api实现

当有浏览器的操作动作时，比如：回退，前进，或者调用history方法，会触发popstate事件，跳转页面

当点击跳转时，会调用pushState方法向浏览器历史添加一个状态，并且不会向服务器发送请求

当刷新页面时，需要后端配合重定向，凡是处理不了的请求都响应单页面的index.html

// pushState
// 语法：
//history.pushState(state, title[, url])
// 示例：
const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

history.pushState(state, title, url)

//popstate事件

Hash

基于hashchange事件

当点击链接或者操作浏览器导致hash值发生改变时，会触发hashchange事件，跳转页面

当刷新页面时，是无法触发hashchange事件的，可以通过load事件获取地址栏信息，解析url的hash跳转页面

react属性校验

prop-types

react懒加载

{lazy，Suspense} 配合使用

import React, { lazy , Suspense } from ‘react’;

const OtherComponent = lazy(() => import(’./OtherComponent’));

<Suspense fallback={<div>Loading...</div>}>
	<OtherComponent />
</Suspense>

redux的使用

 1、创建reduser函数，该函数有两个参数：参数一：state（仓库数据），参数二：action事件对象，函数必须返回一个新的state
 2、创建redux对象，store = createStore(reduser)
 3、获取reduser中的state，----->store.getState()
 4、修改reduser中的数据，------>store.dispatch({对象中必选属性：type:"",扩展属性。。。。})
 5、监听reduser数据，------->store.subscirbe(()=>{当数据发生变化会执行此回调函数})

redux插件：

桥接：react-redux, 连接react和redux，引入Provider组件，包裹住根组件，并将属性store设置为redux对象
   	在需要仓库数据的组件中使用connect，可以将仓库state、组件props和dispatch方法合并到返回的新组件的props属性中以供使用，最后导出新组件

redux异步请求数据：redux-thunk，在redux的index文件中引入，在创建redux对象时，不仅传入(reduser)，再传入一个从redux中解构出来的方法applyMiddleware的调用，在调用applyMiddleware时传入thunk，其目的可以使dispatch的参数可以传入一个函数，以供发送异步请求，函数有三个参数，参数一：dispatch，参数二：getState，参数三：------，在函数体中发送异步请求之后可以调用参数一修改仓库数据。

react-redux

hooks:
useDispatch()  获取派发事件的dispatch函数
useSelect() 传入一个回调函数，得到一个参数为state，可以根据需要返回相应的值
useStore() 可以获得仓库对象所有数据（dispatch，getstate，subscribe....）

redux中间件，一般是说异步请求插件–redux-thunk, redux-saga, redux-promise

自定义redux中间件：applyMiddleware

// 固定写法:三层函数嵌套（半洋葱模型）
// {dispatch,getState}   redux中的操作方法
// next下一步的操作
// action需要操作的函数
export default ({dispatch,getState})=>(next)=>(action)=>{}

模块化仓库：使用combineReducers进行模块合并

redux 原理&优化

redux单项数据流（类似MVC）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kr0vmIEN-1628514345661)(${media}\image-20210724140055443.png)]

高阶组件

高阶组件是个函数，接收一个组件，返回一个组件，可以给组件扩展功能，并且可以转发组件的ref与props

1、withRouter() ----> 获得路由对象
2、forwardRef() -----> ref转发
3、connect(fun,fun)()  ------->  react-redux

context的使用

在react中引入createContext，调用createContext创建共享数据对象（假定义为contextData），然后在需要共享数据的组件树的根组件中使用<contextData.Provider></contextData.Provider>包裹起来，并且将他的标签属性value值设置为想要共享的数据，然后在子组件中使用数据：

1、class组件，引入contextData，将组件的类名称设置给contextData.contextType，即可在组件内部使用this.context获取共享数据；

2、函数式组件，使用contextData.consumer标签包裹组件，在需要使用数据的地方写一个函数，函数形参为共享数据。

改变不会受shouldComponentUpdate的影响，即使shouldComponentUpdate返回false，consumer（类似于renderprops）会在内部调用consumer标签里面的函数，以达到更新的目的

HOOK

16.8====>hook只有在组件第一次渲染时会创建，后续状态改变会取得上一次的缓存状态，而不会重新创建新的hook，hook只能在函数式中使用，而且必须定义在函数的顶层

• useState
  ===> 定义函数式组建的状态，调用后返回一个数组，有两个值，一个是状态（state），一个是改变状态的函数（setState），调用useState时可以传入一个参数，作为状态的默认值，当状态比较复杂的时候，可以传入一个回调函数，setState改变状态的函数可以传入一个回调函数，接受一个形参，为数组第一个参数（状态state）
• useRef
  ===>定义一个ref，调用返回一个对象，有一个键为current，可以赋值给组件标签的ref属性，可以通过ref返回的current获取dom，进行一些dom操作，也可以根据这个特性去定义一些不常变化的变量，例如flag开关
• useEffect
  ===>相当于函数式组件的生命周期，接收两个参数，参数一为一个函数，在组件加载完毕或者状态更新时会调用，这个函数可以返回一个函数，返回的函数会在下次调用参数一之前调用，如果组件销毁，那么这个返回的函数也会调用一次，参数二为依赖项，参数一中如果使用了useState定义的状态，那么必须设置依赖项如果设置依赖项为空数组，那么该Effect只会执行一次
• useContext
  ===> 可以获得context共享的数据，相当于context.consumer的简写形式，就可以优化函数式组件获取context的代码可读性，使用方法为调用useContext（context对象），会返回一个对象
• useMemo
  ===>定义一个函数接收useMemo，相当于计算属性，返回一个计算结果，useMemo接收两个参数，参数一为处理计算逻辑的回调函数，回调函数返回计算结果，参数二为计算属性的依赖，当依赖发生改变才会调用参数一
• useCallback
  ===>useCallback接收两个参数，参数一为定义的函数，参数二为参数一函数的依赖状态，useCallback返回参数一，目的是为了避免因组件更新反复创建相同的函数，这样可以在当参数二依赖项发生改变的时再返回一个新的函数

​ 。。。。。。。more

• 自定义hook：

  必须使用use开头定义函数名称，才可以使用官方提供hook的api

自定义hook

需要获取鼠标当前的位置坐标

import React, { useState, useEffect } from 'react'

const useMousePosition = () => {
    const [position, setPosition] = useState({x: 0, y: 0 })
    useEffect(() => {
        const updateMouse = (e) => {
            setPosition({ x: e.clientX, y: e.clientY })
        }
        document.addEventListener('mousemove', updateMouse)
        return () => {
            document.removeEventListener('mousemove', updateMouse)
        }
    })
    return position
}

export default useMousePosition

纯组件与纯函数

pureComponent（纯组件）

纯函数，没有副作用的函数（同步操作，传入类型的什么值就返回类型的什么值），不存在异步操作，定时器，dom操作。。

JavaScript

promise

promise.all() 全部成功则成功

promise.any() 任意成功则成功

promise.race() 谁快结果就是谁

js事件轮询：短轮询和长轮询

短轮询：设置setinterval定时发送请求，实时获取服务器响应资源，比较消耗网络

长轮询：短轮询的优化方案，利用请求超时机制，不设置超时时间，等待浏览器自动超时，在超时后重新发送请求，直到服务器响应

对象方法

object.keys() 得到对象的所有键组成一个数组
object.values() 得到对象的所有值组成一个数组
object.entries() 得到对象的所有键和值组成一个数组
object.hasOwnProperty(key) 只遍历对象自身的属性，而不遍历继承于原型链上的属性，使用hasOwnProperty 方法过滤一下

面向对象

面向对象三大基本特征：封装、继承、多态

前端加密

加密方式：base64，MD5

进制转换api

进制转换，number.toString(目标进制)

es6新特性

变量声明方式 ====>let, const
箭头函数 =====> ()=>{}
模板字符串 ${}
解构赋值 {a,b} = obj , [a,b]=arr
对象属性简写 {a:a,b:b} ====> {a,b}
展开运算符 …
函数参数默认值 (a=1)=>{}
class 类定义构造函数extends
promise 异步解决方案
模块化 import…from，export
数组字符串新增方法
set类型，map类型

错误捕获

禅道

js多线程

js多线程实现：js提供了一个类 Worker
new这个类 传入一个js的文件路径
就可以向浏览器申请一个线程来处理这个js文件，可以通过一些api来控制这个线程和数据的接收

static

对象的静态方法/属性声明修饰符

对象方法分为实例方法和静态方法
静态方法/属性也可以继承

前端接口安全

token令牌认证（jwt）jwt的签发生成也是在服务器端的

secret是用来进行jwt的签发和jwt的验证

AK（app key）& SK（secret key）secret是保存在服务器端的【用户名&密码】

时间戳超时验证+签名算法字符串

URL签名（算法，非对称算法）

数据脱敏（防范数据库数据泄露）

HTTPS

IP黑/白名单（服务器层面的限制，apache、nginx）

oAuth2.0

webSorket

。。。。

---

http

http 1.0和http 2.0

http 1.0 缓存机制 —缓存相同的http连接，减少3次握手的次数，提升性能，但是可能会造成请求队列的队头阻塞
Connection：keep-alive

http2.0 多路复用（解决队头阻塞问题），允许同时通过一个http连接发送多重请求和响应

http和https区别

https的SSL加密是在传输层实现的

http：超文本传输协议，明文传输，端口80

https：以安全为目标的http通道，就是http的安全版，ca证书，费用较高，端口443，SSL加密

状态码

100 继续
101 切换协议
200 成功
201 已创建
202 已接收
203 非授权信息
204 无内容
205 重置内容
206 部分内容
300 多种选择
301 永久重定向
302 临时重定向
304 未修改，缓存
305 使用代理
306 废弃
400 客户端请求错误
403 拒绝访问
404 not found
500 服务器内部错误，无法完成请求
501 服务器不支持请求的功能
502 无效响应

请求头

user-agent 身份表示

content-type：post和put请求类型

cookie

cache-control 缓存机制

Authorization：用户身份令牌

。。。

强缓存和协商缓存

• 强缓存：返回状态码200，不发送请求到服务器，直接从缓存取

  相关字段：expires, cache-control
  如果同时存在，cache-control优先级高于expires
  

• 协商缓存：状态码304， 发送请求到服务器，让服务器告知缓存是否可用

  相关字段：last-modified/if-modified-since, etag/if-None-match
  

Git

本地仓库初始化

git init

配置用户信息

配置信息优先级：全局配置 < 配置局部

# 全局配置用户信息:  C:\User\系统用户名\.gitconfig文件
git config --global user.name 'your name'
git config --global user.email 'yourEmail@email.com'

# 配置局部用户信息:  .git中的config文件中
git config user.name 'your name'
git config user.email 'yourEmail@email.com'

查看提交版本记录

# 查看提交版本记录
git log  # 完全信息
git log --pretty=oneline # 部分信息
git log --oneline # 更少部分信息
git log -num # 列出最近的num（一个变量）条信息
## 以上都是查看包含当前版本的所有以前版本
git reflog # 列出 所有 Git操作日志，版本前进可以参考

#如果出现很多版本信息，一屏显示不完，会出现一个 : 并闪烁光标，可以通过 ↓ 查看更多，然后按 q 键退出查看

#================================================#

## linux系统操作补充：
## 创建文件夹
mkdir dirname
## 创建文件
touch readme.md
## 列出文件夹下的所有内容
ls
ll -a  #可以查看隐藏文件
## 编辑模式
:set nu #显示编辑行数
esc + :wq #保存文件并退出
# 按下 i 进入编辑模式
# 编辑|查看某个文件
vim readme.txt
# 输出某个文件中的内容
cat readme.txt
# 删除文件
rm readme.txt

查看文件状态

# 查看文件状态
git status

添加文件到暂存区

# .和*表示添加所有新增文件，也可以指定添加文件名称
git add .

将文件添加到历史区

# 可以不用-m ，这样会直接进入到命令行编辑文件的窗口，按下 i 可以进入编辑模式
git commit -m 'some messge'

版本回退/回滚

本质：修改HEAD指针的操作

1、基于Commit Id的操作

## 回退或前进到任意id版本
git reset --Hard <Commit Id>

2、使用 ^ 操作(只能回退)

## 回退到当前版本的上一个版本，可写多个 ^ 
git reset --hard HEAD^

3、使用 ~ 操作(只能回退)

git reset --hard HEAD ~ <num> #回退num个版本

撤销修改

工作区的撤销：

git checkout --<filename>

暂存区的撤销：

git reset HEAD <filename>
git checkout --<filename>

查看分支

#查看本地仓库的分支
git branch
#查看远程仓库的分支
git branch -r
#查看所有仓库分支的情况
git branch -a

创建分支

#创建分支
git branch <分支名称>   #单纯创建
#创建分支并切换到该分支
git checkout -b <分支名称>

切换分支

git checkout <分支名称>

合并分支

#先切换到被合并的分支上
git merge <需要合并的分支>

# 合并冲突：同时修改提交同一个文件
# 解决方案：1、找到冲突文件
# 		  2、删除特殊标记（尖括号和等号，分支名）
#         3、找到提交的开发人员，商量到底如何处理，删除还是手动合并
#         4、再git add 和 git commit

删除分支

git branch -d <分支名称>  #删除分支，如果没有合并的分支，可能删不掉
git branch -D <分支名称>  #强制删除分支，不管有没有合并

远程仓库与本地仓库连接

git remote add <仓库链接别名，一般用origin> <远程仓库的https或者ssh地址>

删除远程仓库的连接

git remote remove <仓库链接别名>

查看本地仓库与远程仓库的关联信息

git remote -v

推送到远程仓库

#第一次要输入仓库账号密码
git push (加一个-u可以在后续提交不需要写后面的 仓库链接别名 和 分支名) <仓库链接别名> <分支名>

克隆远程仓库

git clone <仓库地址>

# 克隆后的不需要连接

抓取fetch

git fetch <仓库链接别名> <分支名>

拉取pull

# 同步代码 
# pull = merge + fetch
git pull 

团队协作

## 没有权利push代码到远程仓库
# 1、将项目fork到自己的仓库
# 2、clone自己fork的项目到本地
# 3、写好代码推送到自己的远程仓库
# 4、发起pull request请求合并

# 可以创建分支，分支也可以发起pull request，操作一样

Git工作流

1、集中式：所有人在一个分支上写代码 master

2、git flow ：不同分支干不同的操作，分支命名规范

3、forking：fork ----> pull request操作

常用问题

负责项目上线后出问题怎么办？

错误日志

新项目：备用方案
旧项目：迭代问题，git版本回滚

组件库antd-mobile坑

1、样式丑，滚动条，自己写css修饰
2、antd-mobile的Menu添加路由，之所以无法使用，是因为这个导航组件不是通过路由跳转过来的，他的父级才是路由跳转过来的 ，将withRouter 引入，组件二次封装

自己封装的组件

Portals弹窗、级联菜单、iscroll 滚动视图

工作中遇到最大的困难

前后端交流，因为是小型自研，所以后端不是很好，接口经常有问题，需要沟通。。。

项目难点

fetch

git fetch <仓库链接别名> <分支名>

拉取pull

# 同步代码 
# pull = merge + fetch
git pull 

团队协作

## 没有权利push代码到远程仓库
# 1、将项目fork到自己的仓库
# 2、clone自己fork的项目到本地
# 3、写好代码推送到自己的远程仓库
# 4、发起pull request请求合并

# 可以创建分支，分支也可以发起pull request，操作一样

Git工作流

1、集中式：所有人在一个分支上写代码 master

2、git flow ：不同分支干不同的操作，分支命名规范

3、forking：fork ----> pull request操作

常用问题

负责项目上线后出问题怎么办？

错误日志

新项目：备用方案
旧项目：迭代问题，git版本回滚

组件库antd-mobile坑

1、样式丑，滚动条，自己写css修饰
2、antd-mobile的Menu添加路由，之所以无法使用，是因为这个导航组件不是通过路由跳转过来的，他的父级才是路由跳转过来的 ，将withRouter 引入，组件二次封装

自己封装的组件

Portals弹窗、级联菜单、iscroll 滚动视图

工作中遇到最大的困难

前后端交流，因为是小型自研，所以后端不是很好，接口经常有问题，需要沟通。。。

项目难点