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)内,还有没有足够的时间允许计算。