3、react的生命周期及不同生命周期的含义?
1)constructor中进行state的初始化。
2)componentDidMount中进行异步加载数据,添加事件监听。
3)getDerivedStateFromProps中将传入的props更新到state上。
4)componentDidUpdate中处理因为state变化触发的请求。
4、常用的图表绘制工具有哪些,可以实现哪些功能?
EChats提供不同平台的多维度的数据展示,并支持多设备和多种可视化类型,
比如:
折线图,
柱状图,
散点图,
饼图,
K线图等。
5、阿里云OSS文件上传的流程是怎么样?
因为涉及到OSS的key保存问题,所以最好将图片发送给后台,然后由后台将图片上传OSS并返回OSS的url。
图片选择使用ant-design的upload组件。
6、redux的主要作用和使用方式?
主要作用是:吧所有的state集中到组件顶部,能够灵活的将所有state各取所需的分发给所有的组件。
store: 保存数据的地方。整个应用智能有一个Store。
state: 包含所有数据,一个state对应一个view。只要state相同,view就相同。
action:View发出的通知action,改变state,从而改变view。修改state的唯一办法是使用Action。
7、升级项目依赖的第三方库要怎么操作?
使用npm outdated 可以查看npm中有最新版本的包,然后使用ncu -u 进行依赖库的升级,最后使用npm install进行新版本的安装就可以了。
其中ncu是nom-check-updated的工具,通过npm install -g npm-check-updates来安装。 升级完成后,需要查看依赖的第三方库的版本是否有大版本的升级,比如从1.x升级到2.x或者3.x升级到4.x,涉及到跨版本升级的,那么一定要小心,需要去对应的官方查看版本迁移记录,进行代码的升级。
所以一般是推荐定时进行第三方库的版本升级,可以有效的修复第三方库存在的bug和避免跨大版本导致的升级影响较大的问题。
8、react新版本中Hook的怎么使用?
可以在不编写class的情况下使用state以及其他的React特性。 使用useState声明新变量
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
useEffect给函数组件增加了操作副作用的能力,与componentDidMount,componentDidUpdate和componentWillUnmount具有相同的用途。React会在每次渲染后调用副作用函数(包括第一次渲染的时候)。
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = You clicked ${count} times
;
});
在组件中可以多次使用useEffect。
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
副作用函数还可以通过返回一个函数来指定如何“清除”副作用。比如,在上面的组件中使用副作用函数来订阅好友的在线状态,并通过取消订阅来进行清除操作。可以理解为之前是在componentDidMount中添加ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
来订阅好友的在线状态,然后在componentWillUnmount中添加了ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
来取消订阅。
useEffect第二个参数为一个依赖的值数组,只有当数组的值发生改变的时候,才执行effect的渲染。如果传入的是一个空数组,那么仅仅在组件挂载和卸载时执行一次。
9、git的了解,rebase和快进是什么含义?
git相对svn的最大的区别就是分布式,也就是说check out项目后,可以在本地进行代码的提交,查看历史版本,创建项目新分支等。
git中使用rebase来管理分支,能够避免同一分支线因为多人的合并而导致分支线的不连贯。 merger中当要合入的分支线A和被合入的分支B,A的基点是B上并B没有新提交,此时就会进行快进及不生成一个合并的提交。也可以关闭快进,从而可以增加一个合并提交,可以很方便的观察到谁进行过一次合并。
10、CSS选择器列表优先级及权重?
1.通用选择器(*)
2.元素(类型)选择器 权重1
3.类选择器 权重10
4.属性选择器
5.伪类
6.ID 选择器 权重100
7.内联样式 权重1000 !important规则会覆盖任何其他的声明,只在需要覆盖全站或外部CSS的替丁页面中使用。
11、CSS配置的常用属性有哪些及作用?
分类 | 属性 | 值 |
---|---|---|
宽和高 | width 宽度;height 高;max-height 跟着父标签 | |
字体属性 | color 颜色;font-family 字体;font-size 文字大小;font-weight 文字粗细 | normal 默认值 bold 粗体 bolder 更粗 lighter 更细 100~900 具体粗细 inherit 继承类元素字体的粗细值 |
颜色 | 十六进制值: #FF0000; 单词表示: blue,red; RGB值: (255, 0, 0);rgba(200, 0, 0, 0.3) | |
文字属性 | text-align,text-decoration, text-indent 段落缩进32像素 | left 左边对齐 right 右对齐 center 居中对齐 justify 两端对齐; none 默认 underline 文本下一条线 overline 文本上一条线 line-through 穿过文本一条线 inherit 继承父类属性 |
背景属性 | 背景颜色background-color: red; 背景图片background-image: url(‘1.jpg’);背景重复 background-repeat: repeat; 背景位置 background-position: right top | |
CSS盒子 | margin 控制元素与元素之间的距离;padding 控制内容与边框之间的距离; border 内边距和内容外的边框; content 内容,显示文本和图像; | 简写顺序:上 右 下 左 |
边框 | border-width, border-style, border-color;可以简写为border:2px solid red; | border-radius 实现圆角边框;border-style的值有none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实现边 |
显示 | display | none 不显示;block 沾满整个页面宽度;inline 显示为内联元素;inline-block 具有内元素和块级元素 |
浮动 | float 任何元素都可以浮动;clear属性指定侧不允许其他浮动元素; | float的属性:left 向左,right 向右,none 不浮动。clear属性left在左侧不允许浮动元素,right在右侧不允许浮动元素,both左右两侧不允许,none 允许出现;inherit 继承父元素; |
溢出 | overflow | visible 内容不会被修剪,hidden 内容被修剪并其余内容不可见,scroll内容被修剪并显示滚动条可查看其余的内容,auto内容被修剪并显示滚动条可查看其余的内容,inherit从父元素继承 |
定位 | position | static 无定位,relative 相对定位,absolute 绝对定位,fixed 固定 |
12、bwebpack的作用及怎么使用?
模块打包机,分析项目结构,找到JavaScript模块以及一些浏览器不能直接运行的扩展语言(Scss, TypeScript等),并将其打包为合适的格式以浏览器使用。 通过css-loader和style-loader将样式表表嵌入webpack打包后的JS文件中。
通过less-loader, sass-loader,stylus-loader进行CSS预处理器可以把特殊类型的语句转化为浏览器可识别的CSS语句。
webpack使用插件来扩展webpack功能并在整个构建过程中生效和执行相关任务。如HtmlWebpackPlugin插件,依据一个简单的模板生成最终的Html5文件并在文件中自动引用了打包后的JS文件。
13、Promise实现及优缺点
Promise用于表示一个异步操作的最终完成(或失败)及其结果值。
var myPromise = new Promise((resolve, reject) => {
// 需要执行的代码
…
if (/* 异步执行成功 /) {
resolve(value)
} else if (/ 异步执行失败 */) {
reject(error)
}
})
myPromise.then((value) => {
// 成功后调用, 使用value值
}, (error) => {
// 失败后调用, 获取错误信息error
})
优点:
解决回调地狱,对异步任务写法更标准化与简洁化。
缺点:首先无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出错误,不会反应到外部。
第三,当处于pending状态时,无法得知目前进展到哪一个阶段。
14、Http状态码及含义
1xx: 服务器收到请求, 需请求者进一步操作
2xx: 请求成功
3xx: 重定向, 资源被转移到其他URL了
4xx: 客户端错误, 请求语法错误或没有找到相应资源
5xx: 服务端错误, server error
301: 资源(网页等)被永久转移到其他URL, 返回值中包含新的URL, 浏览器会自动定向到新URL
302: 临时转移. 客户端应访问原有URL
304: Not Modified. 指定日期后未修改, 不返回资源
403: 服务器拒绝执行请求
404: 请求的资源(网页等)不存在
500: 内部服务器错误
15、async和await的使用
async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
async/await是基于Promise实现的,它不能用于普通的回调函数。
async/await与Promise一样,是非阻塞的。
async/await使得异步代码看起来像同步代码,这正是它的魔力所在。
16、setTimeout时间延迟为何不准
单线程,先执行同步主线程,再执行异步任务队列。
17、let const var作用域及区别
块级作用域,暂时性死区。
var 定义的变量,可以跨块作用域访问,不能跨函数作用域访问。
let 定义的变量,只能在块作用域里访问,不能跨块作用域访问也不能跨函数作用域访问。
const 定义常量,创建时必须赋值,只能在块作用域里访问并且不能修改。
18、for in, forEach和for of的区别
for in遍历数组会遍历到数组原型上的属性和方法,更适合遍历对象。遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下hasOwnProperty方法可以判断某属性是否是该对象的实例属性。
forEach不支持break,continue,return等
for of可以成功遍历数组的值,而不是索引,不会遍历原型。
19、localStorage 与 sessionStorage 与cookie的区别总结
共同点: 都保存在浏览器端且同源。
最后
在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
-
HTML5新特性,语义化
-
浏览器的标准模式和怪异模式
-
xhtml和html的区别
-
使用data-的好处
-
meta标签
-
canvas
-
HTML废弃的标签
-
IE6 bug,和一些定位写法
-
css js放置位置和原因
-
什么是渐进式渲染
-
html模板语言
-
meta viewport原理
ert/64590c67cb47cd552a892ba710477f64.png)