2020年8月面试题6则
一、函数柯里化是什么？ 有什么应用场景？
函数柯里化（currying）是一种编程技术，所做到的是：
- 把原本接收多个参数的函数变为只接受一个参数的函数，并返回一个接收剩余参数的函数。
应用场景：
- 封装一些含有环境判断的方法时，函数柯里化可以帮助我们减少判断条件执行的次数。
例如在封装原生 js 的 addEvent（添加监听事件） 方法时，根据当前浏览器环境使用兼容浏览器版本的 api。
使用函数柯里化，返回一个方法，达到一次判断，多处使用的效果。
var addEvent = function(ele, type, fn, isCapture) {
if(window.addEventListener) {
ele.addEventListener(type, fn, isCapture)
} else if(window.attachEvent) {
ele.attachEvent("on" + type, fn)
}
}
var addEvent = (function() {
if(window.addEventListener) {
return function(ele, type, fn, isCapture) {
ele.addEventListener(type, fn, isCapture)
}
} else if(window.attachEvent) {
return function(ele, type, fn) {
ele.attachEvent("on" + type, fn)
}
}
})()
- 在封装节流、防抖、bind 此类返回值是函数的方法时会用到函数柯里化
- 可用于 vue、react、小程序中的事件传参，在事件绑定时就执行回调函数传参，根据传参值返回真正的事件 callback 函数
<div onCick={handleClick( value )} />
<script>
handleClick = value => e => {
console.log( value, e )
}
</script>
二、webpack 是怎么处理 vue 格式的文件的？
- webpack 是使用 vue-loader 处理 vue 格式的文件的，
- 在 15 版本之后，如果要使用 vue-loader ，需要配合自带的插件 VueLoaderPlugin 一起使用
三、vue 如何在用户没登录的时候重定向到登录界面？
- 前端鉴权可以使用路由守卫，给相应需要登陆权限的路由配置 beforeEnter，判断本地是否存在 token 之类的登录信息，进行路由的重定向
- 后端可以判断请求头中携带的 cookie 或 自定义 header 中是否存在 token，解密 token 判断是否给出响应，是否重定向
四、怎么用 useEffect 模拟生命周期函数？
useEffect 有两个参数，第一个是回调函数，第二个是依赖项数组
- 不写第二个参数时，组件每次渲染后都会触发回调函数，可以模拟类组件的 componentDidUpdate
- 第二个参数为空时，只有在组件第一次渲染时才会执行回调，可以模拟类组件的 componentDidMount
- 回调的返回值也是一个回调方法，会在 useEffect 被移除时执行，可以模拟 componentWillUnmount
useEffect(() => {
// 相当于 componentDidMount
window.addEventListener('resize', onChange, false)
return () => {
// 相当于 componentWillUnmount
window.removeEventListener('resize', onChange, false)
}
}, [])
useEffect(() => {
// 相当于 componentDidUpdate
document.title = count
})
五、useCallback 是干什么的？使用 useCallback 有什么好处？
- useCallback 是一个 react 处理回调方法的 Hook，传入一个回调函数和他的依赖项数组，返回该函数的 memoized 版本
- 可以给回调方法设置依赖项，在依赖项没有发生变化的情况下，避免函数无意义的重复声明，提高代码效率
六、能简单说下 redux-saga 的工作流程吗？
- 配置 redux-saga
- 引入 redux-saga 包的 createSagaMiddleware 方法，创建 sagaMiddleware
- 在创建 store 对象时，使用 applyMiddleware 设置中间件
- 使用 sagaMiddleware 的 run 方法执行一个异步函数，函数中使用 takeEvery 监听异步 action，派发给对应的处理方法
- 使用 redux-saga
- 在组件中派发异步 action
- 异步 action 被 takeEvery 拦截到，执行对应的异步方法
- 异步操作结束后，使用 redux-saga 中的 put 方法派发扁平的 action，交给 reducer 进行处理
