Real interview questions

yuanpingping

• react与vue有什么不同？

• redux 的工作原理（https://segmentfault.com/a/1190000019849834?utm_source=tag-newest）

• 手写一个排序算法 （数组的sort方法，冒泡排序，快速排序）

// 冒泡排序 每次将最小元素推至最前
function sort4(array) {
  var len = array.length,
  i, j, tmp, result;
  result = array.slice(0);
  for (i = 0; i < len; i++) {
    for (j = len - 1; j > i; j--) {
      if (result[j] < result[j - 1]) {
        tmp = result[j - 1];
        result[j - 1] = result[j];
        result[j] = tmp;
      }
    }
  }
  return result;
}

• 数组的去重有那些方法 ?

• proptotype原型链

• 发布订阅设计模式 的需要注意的点

• 单例模式（eg：任务管理器）(https://blog.csdn.net/Liu_Jun_Tao/article/details/81236713?utm_source=blogxgwz6)

• 修饰者设计模式： （eg： 高阶组件，witRouter）

• 观察者（eg：redux 中的 store.subscribe，监听数据是否发生改变）（https://www.jianshu.com/p/219a7a1db775

高阶组件的定义

      高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的React组件，供其他组件调用。

• 两个对象时如何比较相同？如果说每个对象又有多个孩子对象，这样怎么比较？（递归，如何优化递归？）

• map 和 set 数据类型是怎样的

• 后台返回的数据如果不是 Json数据类型，该怎么判断数据类型？（请求头中的 Content-Type 属性）

  [图片上传失败...(image-c0a94e-1607929109560)]

• 如果说应用版本更新后，用户再一次使用这个应用，但是之前使用时，用户本地对这个数据进行了缓存，该怎么处理之前的版本？（可以通过请求的状态码判断 如果请求的状态码 不是 200 ，而是 304 就代表的是使用的缓存的数据）（处理方法百度）

• 谈谈webpack打包工具（入口entry，出口output，loader,插件plugin）

• 谈谈 gulp 打包工具 （对 JS代码压缩处理，将 Sass 代码编译为Css代码 等...）

• Promise 的三种状态

• 一个项目需要定义一个共同的组件，比如弹出框，但是页面使用这个组件需要效果有所不同，比如第一个弹出框 需要两个按钮，第三个弹出框需要三个按钮，第三个弹出框需要一个按钮，如何实现？

补充：

• 当前使用的 react / Vue 的版本
  react -v 16.12.0

• 你上一家公司项目向下兼容到 ie 几？你处理了那些兼容性问题？

• class 是一个语法糖， 如果用原生的 js 该怎么写 ？

• vue 的双向绑定的原理

已经了解到vue是通过数据劫持的方式来做数据绑定的，
其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，

• 简单说一下请求行里面有哪些属性（路由，请求方式，请求的状态码）

请求的状态码 304 代表的是什么？

304状态码或许不应该认为是一种错误，而是对客户端有缓存情况下服务端的一种响应。

• animate transtion，translate 分别表示什么？怎么使用

• 是否对 axios 二次封装？ 怎模封装的？ （请求拦截，响应拦截）

// 请求拦截器
axios.interceptors.request.use(
  function(config) {
    config.headers.token = sessionStorage.getItem(TOKEN)
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  function(response) {
    switch (response.status) {
      case 401:
        loginStore.outUser()
        createHashHistory().push('/main/home')

        break
      case 500:
        break
    }
    return response
  },

库伯

• 说一下原型链(https://segmentfault.com/a/1190000005363885)
  防抖
• redux原理，mobox用法

less和sass的 语法，区别（https://www.zhihu.com/question/270862074）

 1 文件扩展名不一样，less的文件扩展名是less，sass的文件扩展名是sass，或者cscc；
 2  如果不使用镜像，安装sass会非常缓慢，并且容易报错。安装less会顺利很多。
 3 声明变量的区别

LESS：
@link-color: #428bca;
#main {
 @width: 5em;
 width: @width;
}
SCSS：
$link-color: #428bca;
#main {
 $width: 5em;
 width: $width;
}

• git怎么进行版本控制

繞辗

• 数组补一个量

• 变量提升

• 作用于

• this

• 递归

• 遍历一个dom树

• 写一个dom树 react.creatElement()

2021/1/29

兼容ie做了哪些操作？

1 IE10 文字超长换行问题

/*word-break: break-word;*/ IE10中不支持
  word-break: break-all;

• 在ie9以下，不能操作tr的innerHTML

• 不同浏览器默认标签属性不同，初始化，padding ： 0， margin： 0

封装过axios吗

https://blog.csdn.net/chf1142152101/article/details/107099403/
第一步 安装axios包；
第二步 建一个用于封装axios的文件
第三步 在文件中引入axios，然后封装get，put，delete等方法
第四步 在 请求拦截器中 做一些处理，比如添加token，添加请求头信息
在响应拦截器中做一些处理，和后端商量好一些状态码的含义，比如登陆信息过期，需要移出token，返回登陆页等。

讲讲webpack配置

具体使用过哪些loader和babel

用过哪些hooks？

使用useState写的变量和普通变量有啥区别？

useState定义的变量需要使用自定义的set方法去更改，更改之后会触发render重新渲染，
普通变量更改不会出发重新渲染。

echarts在使用过程中遇到过啥问题吗？

比如echarts自身代码原因导致的问题。

讲讲echarts的缺陷。

糖方

1react使用过的版本？

2使用hooks要遵循哪些原则？在if循环里使用了hooks会怎么样？

--仅从 React 功能组件调用 Hook。不要从常规 JavaScript 函数调用 Hook。
---hooks要在函数组件内使用，在类组件内使用不起作用.
--react提供了一些内置的hooks,比如useState，可以创建自定义hooks，以便在不同组件中复用状态
--只能在顶层调用 Hook，不要在循环、条件或嵌套函数中调用 Hook。

2了解jsx吗？在react中可以不用jsx写吗？

利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分，小写的字符串是 HTML 标签，大写开头的自定义标签是 React 组件

3context用过吗？进行了一个怎么样的数据处理？简单描述一下项目中使用到的context？如果不用provider包裹，但是使用了consumer，他会发生一个什么样的情况，页面会报错吗？

Context 提供了一个传递数据的方法通过组件树，从而避免了在每一个层级手动的传递 props 属性。

    //React.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据

    const {Provider, Consumer} = React.createContext(defaultValue);
    //Provider(生产者): 和他的名字一样。用于生产共享数据的地方。生产什么呢？ 那就看value定义的是什么      了。value:放置共享的数据。

      
    /*里面可以渲染对应的内容*/
      
      //Consumer(消费者):这个可以理解为消费者。 他是专门消费供应商(Provider 上面提到的)产生数据。
      //Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue


      < Consumer>
        {value => /*根据上下文  进行渲染相应内容*/}
      。

4context会在初始化的时候传defaultvalue， defaultvalue在什么时候开始生效？

5用的什么Router？react的什么router

https://www.jianshu.com/p/11c750ee3880

6react的保存数据有用到redux吗？hooks里面有用过数据管理状态吗？

有用到过redux，多个页面需要共用信息的时候会用到，把状态存在store里面。
hooks中数据状态管理用到了useState和useReducer，useReducer，比useState更适合管理复杂的数据。

你了解redux吗？与hooks里的reducer有什么区别？简述一下hooks怎么使用reducer作数据管理，一般在什么场景下使用

7 localstorage和sessionstorage和cookie的却别？

在浏览器下发请求带了cookie，页面内嵌了一个别处的网站，然后向这个网站发起了请求，请问他会携带cookie吗？

8 跨域哪些资源不会受到跨域的影响？解决跨域的几种方式jsonp的原理是什么？

为什么