每日五道面试题 2022/7/27

一、怎么封装 axios   

和后端先协商好约定，比如请求头，状态码，请求超时时间等

设置接口请求前缀：根据开发，测试，生产环境的不同，前缀也需要加以区分

请求头：来实现一些具体的业务，必须携带一些参数才可以请求

状态码：根据接口返回的不同 status，来执行不同的业务，需要跟后端约定好

请求方式：根据 get 、post 等方法进行一个再次的封装，使用起方便

请求拦截器：根据请求的请求头来设定，来决定哪些请求可以访问

响应拦截器：这是根据后端返回的状态码来判定执行不同业务

二、TS的理解

TypeScript 是 JavaScript 的超集，可以被编译成 JavaScipt代码，用 JavaScript 写的代码 在TS中

依然有效，TS是纯 面向对象 的编程语言，包含类和接口的概念，更多注重于对数据的类型限制

三、react钩子函数

1、 constructor  初始化钩子函数

   constructor 中完成了 React 数据的初始化，它接受两个参数：props， context，当想在函数内部使用这两个参数时，需要使用 super 传入这两个参数。

注意：使用了  coustructor 这个函数就必须使用 super 这个函数

2、componentWillMount  组件将要挂载时触发的函数

这是组件挂载到DOM之前的生命周期钩子函数，componentWillMount 一般用的比较少，它更多的是在服务端渲染时使用,它代表的是组件已经经历了数据初始化constructor之后,但是还未渲染DOM 

3、render  组件挂载时触发的函数 

   render 是函数是类组件中唯一必须的方法，其生命周期不是必须要写。组件渲染时会走到该生命周期，展示的组件都是由 render 生命周期的返回值来决定，在每一次组件更新时，react 会通过diss算法，比较更新前后的dom树，比较后，找到有差异的dom节点，并重新渲染！

4、componentDidMount  组件挂载完成时触发的钩子函数

   组件挂载到dom上的生命周期钩子函数，组件第一次渲染未完成，这时dom节点已经生成，可以在这里发送请求，返回数据后调用 setState 组件会重新弄渲染

5、componentWillUnmount  组件将要被销毁时触发的钩子函数

   这是组件在卸载/销毁 前的生命周期钩子函数，在此处完成组件的卸载以及数据的销毁

6、componentWillReceiveProps  父组件中改变了props 传值时触发的钩子函数

   1、在接受父组件改变后的props需要重新渲染组件时，用到的比较多

   2、接收一个参数 nextProps

7、shouldComponentUpdate（nextProps，nextState）  是否需要更新组件时触发的函数

   1、这个生命周期钩子函数是一个开关，判断是否需要进行更新，主要用于性能优化

   2、对于组件来讲，只有依赖项的状态发生改变时，才会进行组件的重新更新/渲染

8、componentWillUpdate  将要更新组件时触发的函数

shouldComponentUpdate 钩子函数返回 true 后 组件进入重新渲染的阶段，进入 componentwillUpdate，这里可以拿到修改前的数据，以及修改后的数据

9、componentDidUpdate  组件更更新完成时触发的钩子函数

   这是组件更新后，触发的钩子函数，组件更新完毕后，react 只会在第一次初始化成功后进入componentDidmount 钩子函数，之后每次更新重新渲染都会进入这个生命周期。

React钩子函数执行顺序

挂载阶段：

1. 构造函数 constructor
2. 组件将要挂载  componentWillMount 
3. 数据渲染 render
4. 组件挂载完成  componentDidmount

更新阶段

1. 是否需要更新  shouldcomponentUpdate
2. 组件将要挂载  componentWillMount 
3. 数据渲染完成 render
4. 组件更新完成   componentDidUpdate

销毁阶段

     componentWillUnmount  组件销毁前

四、闭包的使用场景

场景一、封装对象的私有属性和方法

场景二、闭包作用回调函数

场景三、函数的节流与防抖

场景四、setTimeout

五、React 的理解？是什么？

我对react的理解是 react 用于构筑用户界面的 javascript 库，遵循的是组件设计模式，声明式编程和函数式编程，使得前端应用程序更高效，使用虚拟DOM来有效的操作DOM，遵循从高阶组件，到低阶组件的的单向数据流，帮助我们将页面的每个部分分隔为各个模块，每一个模块就是我们常说的组件，我们可以使用这些组件去进行组合，嵌套，来构成从整体页面

react 的特性有

1. JSX 语法
2. 单向数据流
3. component  组件化的编程思想
4. 虚拟dom
5. 声明式编程

react 的优势

1. 声明式编程，更加易用
2. 高效灵活
3. 组件式开发，提高代码复用率
4. 单向数据流，比双向数据流绑定更为安全，传输速度更快

六、JSX 是什么？  他的特性呢？

JSX 是 Javascript  XML  的缩写，不是 html 或者是 xml 是基于 ECMAScript 一种新特性，一种定义带属性树结构的语法

特性：

1. 自定义组件名首字母大写
2. 在render 函数中 return  返回的只能包含一个顶层标签（根标签）
3. 求值表达式，jsx 的基本语法规则，遇到 HTML 标签 就用 HTML 规则解析，遇到{ } 开头就用js的解析方式解析
4. 驼峰命名法
5. class 需要改变为  classname
6. JSX 允许 直接在模板插入 JS 变量 如果这个变量是一个数组 它会展开这个数组（循环渲染）

七、类组件与函数式组件有什么区别？

函数式组件：

   函数式组件也被称为无状态组件，木偶组件，以函数的形态存在的React 组件

在hooks 出现之前，react 中的函数式组件只负责 UI 的渲染，负责展示模块，没有业务逻辑代码，是一个纯函数。

类组件：

在 React 中，类组件就是基于 ES6 语法，继承 Reacr.Component 得到的组件

内部可以使用 React 所有特性 包括生命周期 ，以及其他特性，主要用来做业务逻辑处理

区别：

• 类组件具有生命周期，函数式组件没有
• 类组件继承 Class  函数式组件不需要
• 类组件可以获取实例化的 this （组件本身），并基于this 做操作，函数式组件不可以
• 类组件内部的状态可以定义并维护 state，而函数组件为无状态，定义需要使用 hooks 实现
• 函数式组件比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用

八、 对 state 和 props 的理解

state 的理解props 的理解

props 是组件对外部的接口，state 是组件对内接口，组件可以引用其他组件，组件之间形成了一个树状结构，如果下层需要使用上层的数据或方法，上层组件就可以通过props 来向下层传递属性、方法，因此props 是组件对外部的接口， 用来接收上层组件的属性没方法，而state是定义在组件内部的，维护自身的数据，这就是组件内对内的接口state。

区别：

相同点：props与state里的状态发生改变，组件都会进行重新渲染

不同点：

1. props 是传递给组件的（类似函数的形参），而state是在组件内被组件自己管理的数据库
2. props 是不可修改的，所有React 组件都必须向纯函数那样，保护他们的 props 不被更改，由于 props 是传入的，并且不能改变，因此我们可以将任何使用 props 的 React 组件变为纯组件，也就是说，在相同的情况下，它将始终呈现相同的输出
3. state 是在组件中创建的，一般在 constructor 中做初始化 state
4. state 是多会变的，可以修改，需调用 setStaste ，但是这个方法是异步的