web前端进阶知识点 React、webpack、网络协议、音视频等

一、React

（1）React的设计思想、理念

（2）React的优点，相比较以前的JQuery、ExtJS等框架

jQuery不乏是一个很优秀的Js库，它提供的自带方法很大程度上给前端开发带来了便利。但是随着前端的分离以及前端工程化的进程，项目越来越庞大，对项目的代码可读性、管理维护、性能、可拓展性以及自动化测试上的要求越来越高，渐渐jQuery变得力不从心。

React的哲学就是为了解决以上的问题。

React的特点，虚拟dom、组件化、视图数据驱动、跨端。
‘
1、虚拟dom：优化了js操作对视图的重复渲染，通过diff算法比较内存中新旧虚拟dom，得出最优更新方式，批量更新。
2、组件化：将重复可复用的功能代码，抽离出来作为基础组件、业务组件，降低了维护复杂度，增加了代码可读性，将一个复杂页面作为多个组件的集合。
3、数据驱动：组件自带内部状态state，视图数据绑定state中属性时，只需在业务过程中更新state即可自动触发界面更新渲染。
4、跨端：一次学习，多端编写，支持PC、移动安卓、移动IOS。

（3）React V15 V16 V17 V18的迭代差异，每个版本解决了什么问题

• 以下几个大的改动

• （1）生命周期

   废除了部分 will钩子，新增getDerivedStateFromProps和getSnapShootBeforeUpdate用于代替
  

• （2）虚拟dom

• （3）Fiber

• （4）事件系统

   V18后document上的事件代理被取消
  

• （5）同步/异步更新State

React 的更新是基于 Transaction（事务）的，Transacation 就是给目标执行的函数包裹一下，加上前置和后置的hook （有点类似 koa 的 middleware），在开始执行之前先执行 initialize hook，结束之后再执行 close hook，这样搭配isBatchingUpdates 这样的布尔标志位就可以实现一整个函数调用栈内的多次 setState 全部入 pending 队列，结束后统一 apply 了。
但是 setTimeout 这样的方法执行是脱离了事务的，react 管控不到，所以就没法batch 了

V18中所用的State都将使用批量更新，不再存在历史版本中的在原生事件中的同步更新

在 React 18 #21 中自动批处理以减少渲染

（4）React的数据管理；Redux与Mobx的差异；

（5）React-Redux使用

记住几个方法和声明方式就行了

• 声明reducer：initstate就是store中存的对象

const initState = {
    username:null,
    uid:null,
    remember:null,
    isLogin:null,
}

export default function UserInfor(state = initState, action) {
    switch (action.type) {
        case Type.USERINFOR_INIT:
            return {
                ...state,
                ...action.data
            };
        default:
            return {
                ...state
            };
    }
}`

• Type：与action的对应关系，个人觉得很多余

export const USERINFOR_INIT = 'USERINFOR_INIT';

• action：修改store的方法

import * as Type from './type'

const userInforInit=(data)=>({
    type:Type.USERINFOR_INIT,
    data
})
// 加了中间件thunk的action
const middlewareAction = () => (dispatch,getState,resolve,reject) =>{}
export {
    userInforInit,
    middlewareAction
};

• combineReducers：合并多个reducer

  // 获取合并后的redducers
  const reducers = combineReducers({
    publicStore, // 公共reducer
    ...Reducers // 单个页面中的reducer
  });

• applyMiddleware：应用中间件

applyMiddleware(logger,thunk);

• createStore创建存储对象，其实这个store是个包含四个方法的闭包对象，源码一目了然

store = createStore(reducers, undefined, composedEnhancers);

• 扔到Provider里

 <Provider store={store}>

• 要用的页面使用@connect（@这玩意儿是个高阶函数，connect也是个高阶函数）

@connect(mapStateToProps,mapDispatchToProps,null)

至此，完整能用了。

（6）React-Redux实现原理及源码

（7）React各个版本生命周

这个也是老生长谈，很多文章有详细说明，需要不用想就能说出来

一个组件的生命周期由初始化 、更新（内部状态更新、外部参数更新）、销毁三个阶段构成。

V15版本钩子

	getDefaultProps() （16版本已弃用）
	getInitialState() （16版本已弃用）
	componentWillMount()
	render()
	componentDidMount()
	componentWillReceiveProps()
	shouldComponentUpdate()
	componentWillUpdate()
	componentDidUpdate()
	componentWillMount()

V16版本钩子

	constructor() （较15版本新增）
	componentWillMount() （17版本已弃用）
	render()
	componentDidMount()
	componentWillReceiveProps() （17版本已弃用）
	shouldComponentUpdate()
	componentWillUpdate() （17版本已弃用）
	componentDidUpdate()
	componentWillUnMount()
	componentDidCatch()

V17版本钩子

	constructor()
	static getDerivedStateFromProps() （较16版本新增）
	render()
	componentDidMount()
	shouldComponentUpdate()
	getSnapshotBeforeUpdate() （较16版本新增）
	componentDidUpdate()
	componentWillUnmount()
	getDerivedStateFromError()

V17.3与V17.4后有细微差别，getDerivedStateFromProps

V16.7/8 函数式组件钩子Hooks

	useState()
	useEffect()
	useRef()
	useMemo()
	useCallBack()

生命周期图谱

（8）React hooks的用法、实现原理、及注意事项（useState、useEffect、useRef）

（9）React 虚拟dom数据结构、遍历方式、优化后的diff算法

react的虚拟dom是在内存中维护一个与真实的dom一样结构的对象树，当树状结构发生改变时，会生成一个新的虚拟dom对象，react比较内存中的新旧虚拟dom，Diff出不同的部分，将该diff出的修改添加到队列中，批量更新到真实的dom中。
优点：

（10）React渲染优化：React.memo、React.PureComponent、useMemo、useCallback、React.Lazy、行内样式

（11）组件化、组件间传参

（12）React事件机制及不同版本的差异

（13）React路由

（14）Fitter解决的问题及原理

（15）React-Redux 中间件

二、Webpack

（1）Webpack打包原理

（2）配置文件构成

（3）Loader、Plugin；

（4）打包优化（打包速度、访问速度）

三、浏览器

（1）老生常谈：输入url到按下回车的背后发生了什么

（2）Js引擎、渲染引擎

（3）缓存机制：强缓存、协商缓存

（4）浏览器Dom渲染及阻塞问题

（5）重绘重排触发原因及优化注意事项

（6）跨域问题

（7）cookie、session、storage

四、网络协议

（1）HTTP协议：1.0、1.1、2.0、3.0

（2）TCP、UDP：三步握手、四步挥手

（3）WebSocket

（4）流媒体协议（见五-2）

五、CSS样式

（1）Position

（2）Flex布局

（3）盒模型

（4）CSS3动画

（5）垂直居中

（6）三角形绘制方法

六、HTML5

（1）语义化标签有什么作用

（2）Cookies，SessionStorage和LocalStorage的区别？

七、音视频

（1）音视频帧概念：P、B、I帧

（2）RTP、RTSP、WEBRTC等流媒体协议

（3）ASM、WASM解码库格式

（4）H264、H265、MJPEG、MP4

（5）AAC、G711A、PCM、MP3

（6）MediaSource对象

八、设计模式

常见的需要掌握手写的

（1）发布订阅

（2）监听者

（3）工厂模式

（4）单例模式

九、SPA速度优化

十、代码托管：GIT命令、GITlab二次开发

十一、时髦技术

（1）微前端

（2）Electron

十二、项目架构

（1）MVC与MVVM

（2）组件化

十三、其他老生常谈

（1）Promise 接口及实现
（2）bind apply call 使用及实现
（3）截流、防抖 使用及实现
（4）对象继承及方法
（5）原型链
（6）Http1 2 3
（7）TCP、UDP
（8）CommonJS、AMD、CMD
（9）事件冒泡
（10）宏任务、微任务

十四、场景问题

FIN1、其他八股文
FIN2、项目经历
FIN3、算法

考脑子灵不灵光、代码规不规范、意识到不到位