大同网站建设开发营销策略
写在开头
年前经历了许多大厂的面试,根据类别整理回顾一些知识点。
一、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）
child1eventProxy.trigger('msg', 'end');
child2eventProxy.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 = thisreturn 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 || windowcontext.fn = thisvar resultif(arguments[1]){result = context.fn(...arguments[1])}else{result = context.fn()}delete context.fnreturn result
}
复制代码5、Javavscript原型链
6、宏任务微任务
7、柯里化
8、节流防抖
......等等等等
作者：圆儿圈圈
链接：https://juejin.im/post/5c6297626fb9a04a0e2dada7
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。