第一部分 函数组件和类组件
1.react组件之间如何通讯
回调函数
2.JSX本质是什么?
语法糖
3.context是什么,如果应用?
context是全局信息接口 应用:得到当前的上下文
4.说一下shouldComponentUpdate的用途
判断模块需不需要重新渲染,控制组件是否需要进行加载
5.说一下redux单向数据流的机制
action,store,reduer,view
6.react类组件的setState是同步操作还是异步操作?
异步操作
7.什么是纯函数
一个函数的返回结果只依赖于他的参数
8.介绍react的组件生命周期
初始化状态:1.constructor执行函数 2. render函数 3.componentWillMount 4.componentDidMount
更新状态:1.执行生命周期 componentWillReceiveProps②执行生命周期 getDerivedStateFromProps③执行生命周期 shouldComponentUpdate④执行生命周期 componentWillUpdate
9.react发起ajax应该在那个生命周期
componentDidMount
10.渲染列表,为何使用key?
key可以帮助某次dom元素增删改查的时候发生变化
11.函数组件和class组件的区别
语法上的区别,调用方式
12.什么是受控组件,什么是非受控组件?
受控组件是受控制的组件状态 全程响应外部数据
非受控组件是不受控的组件 初始化是接受外部数据 然后自己在内部存部的自身状态
13.何时使用异步组件
在路由中 在单文件组件中 在全局中
14.多个组件又公共逻辑,如何抽离?
高阶组件 Render Props
15.redux如何进行异步请求
redux中保存的counter是一个本地定义的数据
16.react-router如何配置懒加载的
React利用 React.lazy与import()实现了渲染时的动态加载
利用Suspense来处理异步加载资源时页面应该如何显示的问题
17.什么是PuieComponent?
PureComponent会对props和state进行浅比较,跳过不必要的更新,提高组件性能
18.React事件和DOM事件有什么区别?
事件捕获阶段 目标阶段 事件冒泡阶段 选择监听事件的阶段
19.React性能优化方式有哪些?
懒渲染 懒加载 虚拟列表
20.说一下React和vue的区别
监听数据变化的实现原理不同 数据流的不同 组件通信的区别 模板渲染方式的不同
第二部分:react hooks
1.列举十个常用的react 内置hooks
useState 设置和改变state,代替原来的state和setState
useEffect 代替原来的生命周期,componentDidMount,componentDidUpdate 和 componentWillUnmount 的合并版
useLayoutEffect 与 useEffect 作用相同,但它会同步调用 effect
useMemo 控制组件更新条件,可根据状态变化控制方法执行,优化传值
useCallback useMemo优化传值,usecallback优化传的方法,是否更新
useRef 跟以前的ref,一样,只是更简洁了
useContext 上下文爷孙及更深组件传值
useReducer 代替原来redux里的reducer,配合useContext一起使用
useDebugValue 在 React 开发者工具中显示自定义 hook 的标签,调试使用。
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
2.为什么会有react hooks ,他解决了那些问题?
• 难以重用和共享组件中的与状态相关的逻辑
• 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
• 类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
• 由于业务变动,函数组件不得不改为类组件等等
• 复杂组件 类组件 与函数组件有差异的问题
3.react Hooks 如何模拟组件的生命周期
componentDidMount shouldComponentUpdate componentDidUpdate
4.如何自定义hooks
简单来讲自定义hooks就是把逻辑抽离出来,提取到第三个函数中,当需要使用时可直接调取函数拿到返回值,可进行传参
Hooks是个函数用于数据格式化 业务逻辑性
5.说一下react hooks 性能优化
减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 reconction。
减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。
6.使用react hooks 遇到那些坑
使用push,pop,splice等直接更改数组对象的坑
因为useState的更新函数会直接替换老的state,所以我们在对对象或者数组的state做增删的时候不能像以前直接对数组使用push,pop,splice等直接改变数组的方法
7.Hooks相比HOC和render prop 有哪些优点
优点: 逻辑进行复用,不会影响到组件内部的逻辑;
缺点:HOC传递给被包裹的组件时Props很容易覆盖
第三部分: webpack面试真题
1.前端为何要进行打包和构建?
体积更小 加载更快 编译高级语言和语法 兼容性和错误检查
统一、高效的开发环境 统一的构建流程和产出标准 集成公司构建规范
2.modle chunk bundle 的区别
model - 各个源码文件,webpack中一切皆模块
chunk - 多模块合并成的,如 entry import() spitChunk
bundle - 最终输出的文件
3. loader和plugin的区别
loader - 模块转换器,如 less -> css
plugin - 扩展插件,如 HtmlWebpackPlugin
4.常用的loader和plugin有那些?
babel - JS新语法编译工具,不关心模块化
webpack - 打包构建工具,是多个loader plugin的集合
5.Babel和webpack的区别
output.library
6.webpack如何产生一个lib库
1.babel-polyfill会污染全局 2.babel-runtime不会污染全局 3.产出第三方lib要用balel-runtime
7.说一下Babel-poly和babel-runtime的区别
1.babel-polyfill会污染全局
2.babel-runtime不会污染全局
3.产出第三方lib要用balel-runtime
8.webpack如何实现懒加载
1.import()
2.结合Vue React 异步组件
3.结合Vue-router React-router异步加载路由
9.为何Proxy不能被Polyfill?
1.优化babel-loader 2.IgnorePlugin 3.noParse 4.happyPack 5.ParallelUglifyPlugin
10.webpack如何优化构建速度
1.自动刷新 2.热更新 3.DllPugin
11.webpack如何优化产生代码
1.小图片base64编码 2.bunble 加 hash 3.懒加载 4.提取公共代码
5.使用CDN加速 6.IgnorePlugin 7.使用production 8.Scope Hosting