框架篇

react

参考

react 生命周期

16.8以后的生命周期：
挂载

• constructor
• getDerivedStateFromProps
• render
• componentDidMount
  更新
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapShotBeforeUpdate
• componentDidUpdate
  卸载
• componentWillUnmount

setState到底是异步还是同步

在合成事件和钩子函数中，表现为异步，在原生事件和setTimeout中表现为同步
异步并不是指真实的异步，而是由于react 对 setState的批量更新策略，导致我们在setState之后，无法拿到期望的值。
至于为什么原生事件和setTimeout中为同步，是因为这样的事件处理函数并不是由react托管的，所以无法应用批量更新的策略。

react组件的通信

• 父子：props
• 兄弟：找到相同的父节点
• 深层级通信： context
• 发布订阅
• 全局状态管理： 例如redux

React如何进行组件/逻辑复用

• mixMin
• 高阶组件HOC （ref传递的问题 不可见性）
• render props
• react hooks

HOC Ref传递的问题：官方文档
ref 不会像其他的props一样向下传递，但是使用forwardRef，我们便可以拿到这个ref，并赋到期望的地方

你是如何理解fiber的?

问题：当页面的节点需要大批量更新的时候，React 会递归比对VirtualDOM树，找出需要变动的节点，然后同步更新它们, 一气呵成。这个过程 React 称为 Reconcilation，他会长秋霸占浏览器资源，导致用户触发的事件得不到响应，造成掉帧，卡顿的现象。

React 通过Fiber 架构，让自己的Reconcilation 过程变成可被中断。 '适时’地让出CPU执行权，可以让浏览器及时地响应用户的交互

如下是一些简单的细节：( 嵌套树结构 => 链表结构 递归 => 循环)

React Fiber 是一种基于浏览器的单线程调度算法.
React 16之前 ，reconcilation 算法实际上是递归，想要中断递归是很困难的，React 16 开始使用了循环来代替之前的递归.

Fiber：一种将 recocilation （递归 diff），拆分成无数个小任务的算法；它随时能够停止，恢复。停止恢复的时机取决于当前的一帧（16ms）内，还有没有足够的时间允许计算。

参考