面试题集二 ——react相关

1. react 虚拟DOM

1. 将代码转换成JS对象，然后由JS对象转换成真实DOM
2. 如果是首次渲染，其实vitruaDom不具有任何优势，甚至更加消耗内存，但是它的优势在于diff算法和批量处理策略
3. react基于virtialdom自己实现了一套事件机制自己模拟事件冒泡，捕获，采用事件代理，批量更新，解决兼容性问题，它将virtualdom上的事件映射到真实的Dom事件，然后将所有的事件都代理到document上，进行统一分发
4. react.createElement 将 props,children , 进行批量处理，传递给reactElement
5. $$typeof 是一个symbol类型的变量，可以防止xss攻击，由于json中是不能存储symbol对象的
   （xss：它是通过对网页注入可执行代码且成功地被浏览器 执行，达到攻击的目的）

2. react 渲染流程

1. 使用react.createElement /JSX 编写文件最后都会通过babel转换成 createElement
2. createElement 对key和ref等props做了处理，获取defaultProps对默认props进行复制，对传入的子节点处理，最后形成虚拟dom
3. reactdom.render将生成好的虚拟dom渲染指定容器上，然后采用了批量处理，事务机制等对指定浏览器进行性能优化，最后转换成DOM

3.setstate

调用setstate不用立即更新
setstate本身不是异步的，只是在调用setstate的时候，如果react处于更新状态。当前更新会暂停，等上一次更新执行后在执行

BH4JE_KPRLTQ@6RFS{`XG6A.png

4. bind(this)

1. 由于在调用事件过程中并没有指定调用的组件所以需要手动绑定，否则this = undefined
2. 箭头函数不会创建自己的this,它只会从自己作用域上一层继承this

5. react事件执行顺序

1.由于react的所有事件都是挂载到document上的，当真实的dom触发冒泡，到document后才会对react事件进行处理

2. 先执行原生的事件
3. 然后执行react合成事件
4. 最后执行真正在document上挂载的事件

6. mixin , hook, hoc

1. mixin：混入
   将一个对象的属性拷贝到另一个对象上，可以是多个，也可以是一个，这是extends无法实现的。
   缺点：1. mixin 可能会相互依赖，相互耦合，不利于后期的维护，2. 不同的mixin中的方法会冲突
2. hoc

• 渲染劫持
• 操作props / state ，获取refs
• 状态管理
  hoc实现功能
• 通过原组件和其他组件进行组合渲染可以达到样式布局复用
• 属性代理
• 反向代理 -- super.render()
• 根据特定属性觉得原组件是否渲染
  基本用途： 日志打点 / 权限控制 / 实现双向绑定（利用hoc 代理onchange方法和value属性）/ 表单校验 。。。

• 实例：
  redux中的connect其实就是将mapStateTOProps 和 mapDispatchToProps分别解构后传递给原组件，这样就可以在原组件内直接通过props获取到state和dispatch函数
• 优点
  高级组件时一个没有副作用的纯函数，各个高阶组件不会互相依赖耦合
  高阶组件并不关心数据使用的方式和原因，而被包裹的组件也不关心数据的来源
• 缺点
  hoc可以劫持props ,在不遵守约定的情况下会造成冲突
  如果大量使用，对调试会由很多困难由于多层嵌套

3. hooks
   只能在函数式中使用

• 优势：
  减少状态逻辑复用的风险
  避免地狱式嵌套
  使用函数代替class

7. redux

• redux的可预测性：1. 单一的数据源，应用只能有一个store. 2. 所有数据都是只读的，要想更新数据，必须dispatch一个action来更新3. 当处理action的时候，不得直接修改原始对象必须生成一个新的state
• reducer是纯函数：同样的输入必定得到同样的输出，就可以保证同样的state就一定得到童话贵阳的view，所以reducer里不能改变state，只能返回一个权限的state对象
• redux设计思想：web应用是一个状态机制，视图和状态是一一对应的。所有的状态，保存在一个对象里面。
• Redux是如何将state注入到React组件上的： provider组件，将store传递给provider，通过connect接受、state和mapDispatchToProps

8. react新特性

• Error Bounday
  如果组件发生错误，可以通过error boundary捕获优雅处理 配合使用了以恶新生命周期 componentDidCatch
• render新增了返回的值类型：支持string / number / boolean / null / portal /fragment
• portals可以把组件渲染到当前组件之外，多用于弹框之类的
• setstate传入null就不会发生更新
• 更好的服务器渲染 ，由于15的三倍
• 采用了新的核心架构，fiber 将原来的同步更新转变成更新过程碎片化，避免长时间阻塞主线程使得应用渲染更加流畅
• 支持自定义dom
• 减少文件体积，从 161.7kb -> 109kb
• call return (react-call-return npm)
  解决了父组件需要跟据子组件的回调信息去渲染子组件
• fragment
  将一些子元素添加到dom tree，不需要为这些元素提供额外的父节点
• createRef / forwardRef
  通过createRef获取red对象 forwardRef是ref的转发可以让父组件获得子组件的ref，从而操作子组件
• 生命周期更新
  增加了getDerivedStateFromProps（nextprops,prestate）

9. diff算法

在调用react renderd 的时候，会创建react元素组成的树，在下一次，state和props更新的时候，相同的render会返回不同的树，就需要不叫这两棵树的差别，常规操作一般需要的算法的复杂度o(n^3),但是一旦元素过多则会开销过大，造成页面卡顿，所以，react提出了两个假设：

1. 两个不停类型的元素会产生不同的树
2. 开发者可以通过key，props来暗示哪些子元素在不同的渲染下保持稳定
   这样算法的复杂度就是o(n)
   可以分为： tree diff / component diff /element diff

• tree diff
  react为了让运行效率更高，tree diff只对树进行同层对比，不去比较跨层的节点。
• component diff
  同一层只要出现不是同一类型的组件，就替换该组件的所有子节点。
• element diff
  主要是根据mountIndex和lastIndex进行比较，在确定是否移动 ，
  https://segmentfault.com/a/1190000010686582