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可以在使用时直接传递参数,也可以在 新函数调用时传递参数。