React.md · 鱼丸仙仙/2022-面试题总结

## 受控组件与非受控组件
两者区别：受控组件的状态由开发者维护，非受控组件的状态由组件自身维护
- 使用受控组件来处理表单数据） 
HTML的表单元素中，它们通常自己维护一套state，并随着用户的输入自己进行UI上的更新，这种行为是不被我们程序所管控的。而如果将React里的state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫做受控组件。

## 组件map中key的作用
key有利于提高程序运行和渲染效率
react的虚拟dom使用diff算法比对更改前后发生的最小差异，再对真实dom进行更改
我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系，防止发生不必要的更新操作。  
- 为什么不能用index代替  
那么如果我们用index来标识key，数组在执行插入、排序等操作之后，原先的index并不再对应到原先的值，那么这个key就失去了本身的意义

## ts 的interface type有什么区别？ 
都可扩展，可以相互继承
- type 可以声明基本类型别名，联合类型，元组等类型，type 语句中还可以使用 typeof 获取实例的 类型进行赋值
- interface 能够声明合并

## 为什么不能在循环、条件或嵌套函数中调用 Hooks
- react用链表来严格保证hooks的顺序
hook 相关的所有信息收敛在一个 hook 对象里，而 hook 对象之间以单向链表的形式相互串联。  
mountState（首次渲染）构建链表并渲染；updateState 依次遍历链表并渲染。
updateState的过程：按顺序去遍历之前构建好的链表，取出对应的数据信息进行渲染。
hooks 的渲染是通过“依次遍历”来定位每个 hooks 内容的。如果前后两次读到的链表在顺序上出现差异，那么渲染的结果自然是不可控的。

必须按照顺序调用从根本上来说是因为 useState 这个钩子在设计层面并没有“状态命名”这个动作，也就是说你每生成一个新的状态，React 并不知道这个状态名字叫啥，所以需要通过顺序来索引到对应的状态值

## useEffect
useEffect 第二个参数传入 undefined 每次都会执行，而依赖数组只有在依赖变了才会执行，空数组只会执行一次。  
- hooks 是在 fiber 节点的 memorizedState 属性上存取数据的，会组织一个和 hook 一一对应的链表。  
- 构建这个链表的阶段叫 mount，后面只需要 update，所以所有的  hook 的实现都分为了 mountXxx 和 updateXxx 两部分。
- useEffect 在 update 时会对比新传入的 deps 和之前存在 memorizedState 上的 deps 来确定是否执行 effect 回调，它做了这样的处理：  
- 当 dep 是 null（undefined 也会处理成 null）时，判定为不相等。如果是热更新的时候，判定为不相等。否则会对比数组的每个依赖项来判断是否相等。只要新旧 deps 不相等就执行 effect。

## 虚拟DOM
- 每次操作真实DOM，可能都会导致一次重排、重绘；操作不当甚至还可能引发强制同步布局和布局抖动问题。这些操作会大大降低渲染效率，带来性能上的问题。

- 创建阶段。首先依据 JSX 和基础数据创建出来虚拟 DOM，它反映了真实的 DOM 树的结构。然后由虚拟 DOM 树创建出真实 DOM 树，真实的 DOM 树生成完后，再触发渲染流水线往屏幕输出页面。
- 更新阶段。如果数据发生了改变，那么就需要根据新的数据创建一个新的虚拟 DOM 树；然后 React 比较两个树，找出变化的地方，并把变化的地方一次性更新到真实的 DOM 树上；最后渲染引擎更新渲染流水线，并生成新的页面。
- 虚拟DOM是双缓存思想的体现

- DOM 解决了哪些问题？
1. 频繁更新dom引起的性能问题
2. 将真实DOM和js操作解耦，减少js操作dom复杂性。

## 从MVC设计模式来说React  
- 控制器是用来监控 DOM 的变化，一旦 DOM 发生变化，控制器便会通知模型，让其更新数据；
- 模型数据更新好之后，控制器会通知视图，告诉它模型的数据发生了变化；
- 视图接收到更新消息之后，会根据模型所提供的数据来生成新的虚拟 DOM；
- 新的虚拟 DOM 生成好之后，就需要与之前的虚拟 DOM 进行比较，找出变化的节点；
- 比较出变化的节点之后，React 将变化的虚拟节点应用到 DOM 上，这样就会触发 DOM 节点的更新；
- DOM 节点的变化又会触发后续一系列渲染流水线的变化，从而实现页面的更新。

## React 框架的优点、特性、缺点
1. 响应式开发
2. 声明式开发，声明即使用，语义良好，结构清晰
3. 高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。React 通过在虚拟 DOM 中的微操作来实现对实际 DOM 的局部更新。另外让开发者专注于开发上，减少了操作DOM的繁琐过程，一定程度上加快了开发的速度。
4. 灵活：React 可以与已知的库或框架很好地配合。
5. 跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
6. 模块化：为你程序编写独立的模块化 UI 组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
7. 单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。

## 类组件和函数式组件有什么区别？
1. 类组件是面向对象的，通过继承 React.Conponent 并调用render方法返回React元素；函数式组件是一个纯函数，接收一个props对象作为参数，返回React元素 
2. 在调用方法上，函数式组件调用重新渲染后函数的方法；类组件重新渲染后调用的是重新new的实例对象的方法。
3. 函数式组件会捕获当前渲染时所用的值，而类组件的this会一直指向最近的实例对象，即会捕获到最新的值。 
4. 实现性能优化上，类组件一般使用ShouldConponentUpdate这个生命周期，函数式组件使用React.Memo()实现
5. 类式组件的缺点是为了面向对象而面向对象，很多代码浪费  
    函数式组件简单高效，return jsx 就是函数式组件 + 一系列的hooks函数，高效完成相应的功能  
    - 类式组件代码量多，继承React.Component类，render方法，this.state，componentDisMount生命周期等，
    函数式编程2倍的代码  
    - 函数式组件 返回JSX就是组件，还有丰富且灵活的hooks，函数完成工作  
    - react 编程进入函数式编程的世界  
    - hooks 底层其实就是 封装、闭包、高阶函数
    - hooks编程是react/vue 拥抱的，当下最佳开发方式  
6. react-router-dom useNavigate等第三方或自定义hooks 可以方便的引入很多高级功能，简单好用  
    ahooks 常用hooks库

## 前端的假接口可以用哪些方式实现
- 前后端分离  
    前端需要在真实接口到达前，用假接口先顶一下  
    先定义接口文档，再分离开发  
1. fastmock 好用，可视化，跨域
2. node 自己写   
    restful Method + url  
    简单的，自己解决跨域  
    以后结合mysql 复杂    
3. mockjs npm包

## React 的生命周期  
类组件中才有  
函数式组件 useEffect

## useEffect 和 useLayoutEffect区别
useEffect是异步处理副作用，而useLayoutEffect是同步处理副作用，可以使用它来读取 DOM 布局并同步触发重渲染。   
比如修改页面中的DOM元素的颜色或者位置时，在useEffect中修改DOM相关的属性会看到页面有明显的闪动，而在useLayoutEffect中修改DOM相关的属性时，则不会发生闪动   
useEffect 和 useLayoutEffect执行时机的不同。useEffect能够适用于大部分场景，除了前面的例子中说的修改DOM元素的位置和颜色这样的场景不适用。而useLayoutEffect因为是同步执行的，所以在DOM加载完成后再去进行操作就不会发生闪动，也因为useLayoutEffect是同步执行的，所以我们也要避免在useLayoutEffect执行需要大量计算的内容，如果需要大量计算，就会导致页面的卡顿，从而造成页面的阻塞。

useEffect 是异步执行的，而useLayoutEffect是同步执行的。
useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。

## redux thunk 实现原理  
其实异步的action就是一个函数。
redux-thunk中会判断Action的类型，如果是函数类型的话，会将dispatch作为参数传入，接着执行这个函数，也就实现了异步

## react和vue的区别
都提倡组件化，都实现了数据驱动视图，都使用diff算法，也都对diff算法进行了优化，都有router库实现url到组件的映射，都有状态管理等等.....
1. 数写形式上的不同
    - react推荐 jsx + inline-style，把html、css都写进javascript里，即all in js  
    - vue推荐template单页组件格式，也就是把html、css、javascript全部写在一个文件里面、
    总结：react更加灵活，jsx可以当作props进行传递，而vue2的Option和api书写位置相对固定

2. 数据驱动视图的实现方式不同
    - vue 是通过 Object.definepropty 去给data的属性转为getter/setter，在模板编译过程中，用getter去访问了该属性，就会收集这个依赖，当调用setter时，就会比对前后两个数据是否发生改变，继而判断是否触发视图的重新渲染。  
    - react 是通过api去更改数据的，类组件中使用setState，函数式组件用useState。当调用setState，将setState的第一个参数加入到state更新队列中，再判断当前react是否处于批量更新状态，是的话将待更新组件加入到待更新组件队列，否则开启批量更新事务对待更新组件进行更新。

3. vue 的依赖收集更加智能
    - vue3中的watcheffect/computed可以自动搜索依赖
    - react中useEffect/useMemo/useCallback的第二个参数需要手动添加依赖的数组

4. 优化的方法不同
    - 因为vue以组件为颗粒度，可以精确的收集依赖，精确的找到需要更新的地方，所以可以通过将组件拆分的尽量细，来实现优化。
    - react是通过对比差异更新的，父组件更新子组件默认更新，可以通过对子组件进行浅比较来判断是否需要更新。

鱼丸仙仙/2022-面试题总结

简介

发行版

贡献者

近期动态

鱼丸仙仙/2022-面试题总结 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

鱼丸仙仙/2022-面试题总结