react面试

Posted 2023-02-14 鲸渔要加油

文章目录

• 1、useEffect 中怎么使用 async/await ？
• 2、用 echarts 比较难处理的问题是什么？
• 3、webpack 的了解， webpack 怎么配置反向代理？
• 4、什么是纯函数，优点是什么
• 5、ui 组件化和模块化，ui 组件的特性？
• 6、什么是 websocket？
• 7、对象的属性类型有哪些?
• 8、React setState的两种形式?
• 9、mvc 是什么思想？
• 10、react 的设计模式有哪几种？
• 11、虚拟DOM是什么？实现原理？
• 12、说一下index和key的区别和原理？
• 13、说一下 hook 能不能写在 if 判断后面？
• 14、Redux 的 connect？
• 15、js 是单线程的，为什么可以处理异步任务？
• 16、HTTP 缓存？
• 17、说一下BFC ？
• 18、css优先级？
• 19、setstate是同步还是异步？

1、useEffect 中怎么使用 async/await ？

useEffect 中的第一个回调参数返回的是一个 clean-up 函数，所以不能返回 promise 对象，更不能直接使用 async/await，否则会报错

• 使用自执行函数
• 在 useEffect 的回调参数内部定义一个 async 函数
• 在 useEffect 外部定义 async 函数，在回调参数中去执行

2、用 echarts 比较难处理的问题是什么？

tab切换界面后，再返回，原来设置宽度为100%的图表显示不全

• 动态设置图表容器的宽度为window.innerWidth * (去掉侧菜单宽度的%) + ‘px’

data是json数据，格式如下: 令x轴展示时间戳，y轴数据按一整天来展示

• 解决办法（比较笨的方法）：
  1、先将时间戳拿出来换算成日期：xxxx-xx-xx
  2、 再去掉重复的时间得timeTmp数组，3将timeTmp 遍历，和data相比较，将value去除，做处理

3、webpack 的了解， webpack 怎么配置反向代理？

四个配置文件

1、入口（entry）

2、出口(output)

3、loader

4、插件(plugins)

下包，引入因为 webpack4 将 webpack 和 webpack-cli 分开了，还要下载 webpack-cli，再在 package.josn 添加一个 build 构建脚本，用 babel 转译 js，将 css 提取到一个文件，再热更新 webpack dev vserver

反向代理

1、在项目目录下cmd

2、安装axios与http-proxy-middleware模块

3、在项目/config/index.js中的dev中配置

4、在dev配置对象中找到proxyTable:

    //反向代理配置
    //proxy:就是代理的意思
    //把 开头为"/api"的请求，转到 http://localhost:3000
    proxyTable: 
      '/api':
         target:"http://localhost:3000",//这个地址就是后端提供数据的地址。
         changeOrigin:true,
         pathRewrite:
           '^/api':''
         
      
    ,

4、什么是纯函数，优点是什么

纯函数： 相同的输入永远只会得到相同的输出，且没有任何可观测的副作用，相当于数学表达式

可缓存：因为纯函数对于相同的输入有相同的输出，所以可以将结果进行存储，减少运算过程，提高性能

可测试：纯函数让测试更方便

并行处理：在多线程环境下并行操作共享的存储数据可能会出现意外情况，纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数

5、ui 组件化和模块化，ui 组件的特性？

组件化：层层嵌套，基于UI层面的封装，组件最为重要的就是重用（复用）像antd的组件

模块化：基于代码层面的封装，可以独立的运行，目的是降低模块间的耦合

6、什么是 websocket？

• websocket是html5中新出的协议

• 支持推送，服务端可直接将数据发送到客户端而不用等待客户端发起请求

• 只要建立了连接，就会一直保持连接，直到请求关闭。也就避免了HTTP的非状态性，和HTTP相比，不但每次连接时候的总开销少了，而且websocket首部位置的信息量也少，通信量也小了

• 减少了服务器端的资源小消耗（由于Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求，这样就解决了接线员要反复解析HTTP协议）

7、对象的属性类型有哪些?

• Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值为true

• Enumerable：能否通过for-in循环返回属性。默认值为true

• Writable：能否修改属性的值，默认值为true

• Value：属性的数据值，默认为undefined

8、React setState的两种形式?

对象式 如果新状态不依赖于原状态
函数式 如果新状态依赖于原状态

如果你所更改的组件的状态值是基于原有状态的值，你可以选择使用函数式，因为在函数式中，你可以接收到两个参数，一个是当前组件的state，一个是props，这两个参数里面存放着此组件相对应的数据，所以你可以通过state参数，来获取当前组件的状态值，从而进行相应的更新。

当然，如果你说对于此类型，更改状态要基于已有状态值进行更新的，你用对象式当然也可以，只不过你要重新写 this.state.xxx来获取你的当前状态值，这样会比较麻烦。所以建议采用函数式

9、mvc 是什么思想？

Model模型=>View视图=>Controller控制器

10、react 的设计模式有哪几种？

(1) 容器与展示组件
(2) 高阶组件
(3) render props
(4) context 模式
(5) 组合组件
(6) 继承

11、虚拟DOM是什么？实现原理？

虚拟 dom 是用 js 模拟一颗 dom 树,放在浏览器内存中，相当于在 js 和真实 dom 中加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

12、说一下index和key的区别和原理？

索引一般有很多种，我们常用的就是
主键索引
唯一索引 这里 key 就是唯一索引，有两个作用，一是约束作用（constraint），用来规范一个存储主键和唯一性
普通索引 index是普通索引，是数据库的物理结构，它只是辅助查询的，它创建时会在另外的表空间以一个类似目录的结构存储

13、说一下 hook 能不能写在 if 判断后面？

文章
不能，Hook 的调用顺序发生了改变会报错
update 更新阶段，每次调用 useState，链表就会执行 next 向后移动一步
如果将 useState 写在条件判断中，假设条件判断不成立，没有执行里面的 useState 方法，会导致接下来所有的 useState 的取值出现偏移，从而导致异常发生

14、Redux 的 connect？

文章
连接 React 组件与 Redux store

• mapStateToProps：更新props————>作为输入源。返回一个对象，key为UI界面对应的名称，value为state处理的结果
• mapDispatchToProps：更新action————>作为输出源。触发action更新reducer，进而更新state，从而驱动参数1变化，引起UI数据的变化
• mergeProps
• options

15、js 是单线程的，为什么可以处理异步任务？

js是单线程的，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程

浏览器的线程包括：事件触发线程、定时器线程、http请求线程等
​ js异步任务常见的有：事件、定时器、网络请求等

任务队列：存放的是异步任务的回调函数

16、HTTP 缓存？

强缓存
强缓存两个相关字段：【Expires】，【Cache-Control】
协商缓存
强缓存失效后，浏览器在请求头中携带响应的缓存etag来向服务器发送请求，服务器根据对应的tag，来决定是否使用缓存，【last-modified】和【etag】

17、说一下BFC ？

文章
即块格式化上下文

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

18、css优先级？

内联>id>类，伪类，属性>标签，伪元素>通配符，子选择器，相邻选择器

19、setstate是同步还是异步？

文章
setState为什么默认是异步，在setTimeout或者原生事件中，setState是同步的