元保集团一面

50 阅读4分钟

1.react的生命周期说一下

f8e9a51a2a1d452fb519ef47aef42447_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0 (1).jpg juejin.cn/post/696618…

2.class组件和hook组件的区别,为啥不用class组件了

  • hook更加简洁方便,不需要维护this
  • hook不需要使用生命周期钩子,可以用useEffect的副作用来模拟。这样写法更加紧凑
  • hook的组件复用起来更加的方便

3.react有render和commint2个阶段,各是干什么的

  • render阶段主要是将

    • jsx通过react.createElement()转换成vdom
    • 在reconcile阶段将vdom转换成fiber
    • diff也是在reconcile阶段,它会将新的vdom和老的fiber对比,然后生成新的fiber
  • commit阶段主要是将vdom转换成真实dom,并进行layout以及执行hook的一些副作用

juejin.cn/post/720333…

juejin.cn/post/692206…

4.如果做页面优化实在render阶段还是commit

5.webpack用过吗,怎么配置source-map

  • sourcemap 是编译后的代码和源码之间的一种映射关系
  • 通过选择dev-tool的不同模式可以有不同的source-map生成结果,速度上也会有不同

具体配置和讲解 juejin.cn/post/716588…

6.说一说你的项目中的难点,以及你是怎么封装组件的

  • 复杂的组件维护好一个ReadMe,同时在组件的上方做好props的参数注释,同时尽可能的设置好默认值
  • 如果要支持更多的可拓展性,那么可以通过暴露新的参数来接收
  • 请求接口这些操作不要写
  • 不要使用store
  • 如果业务逻辑复杂,那么在组件内部进行二次的拆分
  • 做好容错机制,当数据类型不对的时候进行容错等等

7.防抖和节流是什么,在工作中什么地方用

src=http___img3.doubanio.com_view_note_raw_public_p72872342.jpg&refer=http___img3.doubanio.gif

  • 防抖就和上面这个发条玩具非常像。在不断拧发条的过程中,玩具并不会动,而且每一次都会更换发条的位置。只有最后一次不拧发条了,玩具才会动起来。适合的前端场景有输入后自动查询接口等情况
const debounce = (fn,delay) => {
    let timerId = null
    return function(){
        const context = this
        if(timerId){
            clearTimeout(timerId)
        }
        timerId = setTimeout(()=>{
            fn.call(context,arguments)
            timerId = null
        },delay)
    }
}

防抖应用场景 比较典型的有搜索事件,用户在不断输入值时,用防抖来节约请求资源,只有最后一次回车才能返回结果。还有按钮点击事件,为了防止用户多次重复提交也会使用防抖函数。最后就是部分的电话号码输入的验证,要等停止输入后才会进行一次验证。

  • 节流是可以保证每段时间内只有一次回调函数被执行,例如王者荣耀里的技能,放一次之后必须要等3秒才能放下一次
// 使用定时器
const throttle = (fn,delay) => {
    let canUse = true
    return function(){
        if(canUse){
            fn.call(this,arguments)
            canUse = false
            setTmeout(()=>{
                canUse = true
            },delay)
        }
    }
}

// 不使用定时器
const throttle = (fn,delay) => {
    let lastTime = 0
    return function(){
        let nowTime = new Date().getTime()
        if(nowTime - lastTime > delay){
            fn.call(this)
            lastTime = nowTime
        }
    }
}

节流应用场景 节流适合大量事件按时间做平均分配触发。

比较典型的有监听滚动或 resize 事件,比如是否滑到底部自动加载更多,调整窗口大小。另外还有一个就是像掘金写文章这里一样,有自动保存功能,我们一边写,它可以一边保存。剩下就比如说 DOM 元素拖拽,以及游戏中的刷新率都是会使用到节流函数的

链接:juejin.cn/post/716493…

推荐文章:一下子就看明白了

blog.csdn.net/Nicole99618…

封装防抖节流的hook

juejin.cn/post/720239…

8.跨域是咋回事?怎么解决?setupProxy架设devServer解决跨域的原理是什么

  • 跨域是浏览器的一种保护机制,在域名、端口号、协议不同的时候便会跨域
  • 解决的原理是服务器与服务器之间是不存在跨域的

9.你们是怎么做登录的

  • 先判断localStorage中是否存在token,有的话则直接进入,没有的话则转向登录页面
  • 登录页面登录时向后端拿token
  • 将token放入localstorage中
  • 请求配置的时候,将token通过authorization字段放入请求头中

10.cookie是什么,项目中用到过吗

  • cookie最大只有4k
  • 它是服务端生成,然后传递给客户端,之后存在客户端
  • 它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上
  • 不要存储敏感数据,比如用户密码,账户余额
  • cookie不可以跨域,但是可以通过domain进行互通使用 juejin.cn/post/684490…

11.你们交付项目,是怎么做前端异常监控的

juejin.cn/post/698768…

12.event-loop是什么,在工作中遇到过吗

13.react的事件合成层是什么