写在开头
年前经历了许多大厂的面试,根据类别整理回顾一些知识点。
一、react+redux部分
1、react Fiber的作用
2、react是同步还是异步?
react是异步的,有两种方式可以处理异步:
this.setState({
count:this.state.count+1
},function(){
this.setState({count:this.state.count+1});
})
===========
this.setState((prevState)=>({count:prevState.count+1}));
3、简写redux原理
createStore是redux的核心、暴露出dispatch、subscribe、getState方法给使用者。
function createStore(reducer) {
let state;
let listeners=[];
function getState() {
return state;
}
function dispatch(action) {
state=reducer(state,action);
listeners.forEach(l=>l());
}
function subscribe(listener) {
listeners.push(listener);
return function () {
const index=listeners.indexOf(listener);
listeners.splice(inddx,1);
}
}
dispatch({});
return {
getState,
dispatch,
subscribe
}
}
4、redux如何更新组件
store.subscribe(()=>this.setState({count:store.getState()}))
subscribe中添加回调监听函数,当dispatch触发的时候,会执行subscribe listeners中的函数。
subscribe负责监听改变
5、react如何区别component和dom
当用ReactDOM.render
创造一个dom tree的时候,一般有三种方式:
(1) 第一个参数传JSX语法糖
ReactDOM.render(
<button color='blue'>OK</button>,
document.getElementById('root')
);
React.createElement会一个虚拟dom元素。
ReactDOM.render(
React.createElement({
type:'botton',
porps:{
color:'blue',
children:'OK!'
}
}),
document.getElementById('root')
);
虚拟dom是一个obj:具有一个type属性代表当前的节点类型,还有节点的属性props
(2) 函数声明
function RenderButton() {
return <button color='blue'>OK</button>
}
ReactDOM.render(
<RenderButton />,
document.getElementById('root')
);
(3) 类声明
class DangerButton extends Component {
render() {
return <button color='blue'>NOT OK</button>
}
}
ReactDOM.render(
<DangerButton />,
document.getElementById('root')
);
如果我们组合三种方法创建一个节点:
const DeleteAccount =()=>{
<div>
<p>Are you sure?</p>
<DangerButton>Yep</DangerButton>
<botton color='blue'>Cancel</botton>
</div>
}
React.createElement会把这个JSX转换为如下的虚拟DOM:
const DeleteAccount = ()=>{
type:'div',
porps:{
children:[{
type:'p',
props:{
children:'Are you sure?'
}
},{
type:'DangerButton',
props:{
children:'Yep'
}
},{
type: 'botton',
props: {
color: 'blue',
children: 'Cancel'
}
}]
}
}
当React碰到type是function|class时,它就知道这是个组件了。
6、react 生命周期中有一个被移除
v16.3新引入两个生命周期:getDerivedStateFromProps,getSnapshotBeforeUpdate
v17.0中将要被移除的三个生命周期:componentWillMount、componentWillReceiveProps、componentWillUpdate
7、react事件机制
其实React事件并没有原生的绑定在真实的DOM上,而是使用了行为委托方式实现事件机制。
React会将所有的事件都绑定在最外层(document),使用统一的事件监听,并在冒泡阶段处理事件,当挂载或者卸载组件时,只需要在通过的在统一的事件监听位置增加或者删除对象,因此可以提高效率。
而是在基于Virtual DOM的基础上实现了合成事件(SyntheticEvent)
因此在事件层次上具有浏览器兼容性,与原生的浏览器事件一样拥有同样的接口。
- 使用事件委托技术进行事件代理,React 组件上声明的事件最终都转化为 DOM 原生事件,绑定到了 document 这个 DOM 节点上。从而减少了内存开销。
- 自身实现了一套事件冒泡机制,以队列形式,从触发事件的组件向父组件回溯,调用在 JSX 中绑定的 callback。因此我们也没法用 event.stopPropagation() 来停止事件传播,应该使用 React 定义的 event.preventDefault()。
- 所有事件绑定在document上
- 所以事件触发的都是ReactEventListener的dispatch方法
8、react 兄弟组件的通信
React 组件间通讯 1.通过中介父组件 child1中调用父组件改编child2 state的方法 2.发布者-订阅者模式(eventProxy)
child1
eventProxy.trigger('msg', 'end');
child2
eventProxy.on('msg', (msg) => {
this.setState({
msg
});
});
9、logger中间件是在哪一步调用的
applymiddleWare()
中间件使用这个函数,对store.dispatch方法进行了改造,在发出Action和执行Reducer这两步之间,添加了其他功能。
二、babel部分
1、babel、babel-polyfill的区别
babel-polyfill:模拟一个es6环境,提供内置对象如Promise和WeakMap 引入babel-polyfill全量包后文件会变得非常大。它提供了诸如 Promise,Set 以及 Map 之类的内置插件,这些将污染全局作用域,可以编译原型链上的方法。
babel-plugin-transform-runtime & babel-runtime:转译器将这些内置插件起了别名 core-js,这样你就可以无缝的使用它们,并且无需使用 polyfill。但是无法编译原型链上的方法
babel/preset-react
npm install --save-dev @babel/preset-react
runtime 编译器插件做了以下三件事:
- 当你使用 generators/async 函数时,自动引入 babel-runtime/regenerator 。
- 自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件。
- 移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替。
三、node部分
1、提高node性能
子线程:cluster? 子进程:Node.js Child child_process(spawn()、exec()、execFile()、fork()) 没答上来(尴尬)
2、node一些api例如fs同步异步处理问题等
四、webpack部分
1、webpack-sever热更新机制
当完成编译的时候,就通过 websocket 发送给客户端一个消息(一个 hash
和 一个ok
)
向client发送一条更新消息 当有文件发生变动的时候,webpack编译文件,并通过 websocket 向client发送一条更新消息 webpack-dev-server/lib/Server.js:119
compiler.plugin('done', (stats) => {
// 当完成编译的时候,就通过 websocket 发送给客户端一个消息(一个 `hash` 和 一个`ok`)
this._sendStats(this.sockets, stats.toJson(clientStats));
});
2、webpack优化问题:多页面提取公共资源
common-chunk-and-vendor-chunk
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 2,//最小重复的次数
minSize: 0//最小提取字节数
},
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
}
}
}
}
3、webpack如何只打包更新修改过的文件
没答上来?猜测是entery入口修改??
四、基础知识部分
1、继承的几种方式(es5、es6 class等)
2、css
3、重绘 回流
4、bind、call、apply的区别,并手写
//bind返回一个新函数
Function.prototype.myBind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
let args = Array.prototype.slice.call(arguments,1)
let _this = this
return function F() {
if (this instanceof F) {
return new _this(...args, ...arguments)
}
_this.apply(context,args.concat([...arguments]))
}
}
Function.prototype.apply = function (context) {
var context = context || window
context.fn = this
var result
if(arguments[1]){
result = context.fn(...arguments[1])
}else{
result = context.fn()
}
delete context.fn
return result
}
5、Javavscript原型链
6、宏任务微任务
7、柯里化
8、节流防抖
......等等等等
写在最后
此文是菜鸟本菜对面试中遇到的问题进行总结与思考,有不对的地方大家请帮忙指出~~
招聘贴
字节跳动招人啦!
职位描述:前端开发(高级)ToB方向—视频云(Base: 上海、北京)
1、负责音视频点播/直播/实时通信等多媒体服务产品化以及业务云平台建设;
2、负责多媒体质量体系、运维体系建设及系统开发工作;
3、擅长抽象设计、工程化思维,专注交互、打造极致用户体验。
职位要求
1、计算机、通信和电子信息科学等相关专业优先;
2、熟练掌握各种前端技术,包括 HTML/CSS/JavaScript/Node.js 等;
3、深入了解 JavaScript 语言,使用过 React 或 Vue.js 等主流开发框架;
4、熟悉 Node.js,了解 Express/KOA 等框架,有大型服务端程序开发经验者优先;
5、对用户体验、交互操作及用户需求分析等有一定了解,有产品或界面设计经验者优先;
6、有自己的技术产品、开源作品或活跃的开源社区贡献者优先。
职位亮点
视频云团队依托抖音、西瓜视频等产品的音视频技术积累和基础资源,为客户提供极致的一站式音视频多媒体服务,包括音视频点播、直播、实时通信、图片处理等。对内作为视频技术中台,服务内部业务;对外打造产品化的音视频多媒体服务解决方案,服务企业级用户。
团队具备规范的项目迭代流程、完善的项目角色配置;技术氛围浓厚,拥抱开源社区,定期分享,让大家能够伴随业务快速成长,用技术改变世界!
投递方式
可直接发送简历至:yuanyuan.wallace@bytedance.com
也可以扫描内推二维码在线投递,期待你的加入!~