【前端面试】常见问题总结

1.知道React ref吗？它在类组件和函数组件里怎么使用

React中的ref属性可以帮助我们获取子组件的实例或DOM对象。

在类组件和函数组件中都可以使用。

在类组件中，一种方式就是使用回调函数，把dom节点或组件实例当做参数传入进去

另一种方式就是使用React.createRef()来创建ref,将其赋值给一个变量，通过ref挂载到dom节点或组件实例上，该ref的current属性就能拿到dom节点或组件的实例；

在函数组件中使用ref，需要两个api，useRef和forwardRef

useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数；

forwardRef接受一个渲染函数，其接收props和ref参数并返回一个React节点。

2.对react中key值的理解

React利用key来识别组件，它是一种身份标识，相同的key，react会认为是同一个组件，这样后续相同的key对应的组件都不会创建。

有了key属性之后，就可以和组件建立一种对应关系，通过key来决定是小孩重建组件还是更新组件；

如果key相同，看组件属性有没有变化来决定更不更新；

如果key不同，就先销毁该组件再重建。

3.为什么不建议在 componentWillMount 做Ajax等操作？

ajax请求是异步的，需要时间。我们不能保证在组件挂载之前ajax请求已经完成，如果是这样，也就意味着可能会在一个未挂载的组件上调用setState，将不会起作用。

我们应该在componentDidMount中做ajax请求，此时组件已挂载。

4.说一下vue-router 守卫有哪些，如何实现路由懒加载？

vue的路由守卫：全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）、全局后置守卫（afterEach）、路由独享守卫（beforeEnter）、组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

路由懒加载就是把不同的路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件，主要实现原理就是vue的异步组件和webpack的代码分割。

第一步 我们可以将异步组件定义为返回一个promise的工厂函数

第二 在webpack中使用动态import语法来定义代码分块点

在路由配置中什么都不需要改变

5.什么是Vue.js 动态组件与异步组件？

动态组件：如果我们打算在一个地方根据不同的状态引用不同的组件的话，vue给我们提供了动态组件。

实现就是通过给元素加一个特殊的is属性。

如果我们希望组件实例在它们第一次被创建的时候缓存下来，可以使用元素将动态组件包裹起来。

异步组件：在一些大型的应用中，我们可能需要将应用分割成一些小的代码块，并且只在需要的时候才从服务器加载。vue允许以一个工厂函数的方式定义组件，这个工厂函数会异步解析组件定义。vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

我们通常就是将异步组件和webpack的code-splitting功能配合使用，比如实现路由懒加载。

6.说一下call、apply、bind的区别

首先，call，apply，bind都是用于改变this指向的

它们的区别主要有两点，call和apply是立即调用的，bind是返回一个新函数；

另一个区别就是传递参数的不同。call传递参数时，从第二个参数开始依次进行传递；apply传递参数时，第二个参数是一个数组，数组里面的每一项依次是向函数传递的参数；bind可以在使用时直接传递参数，也可以在 新函数调用时传递参数。