React hooks
hooks解决了什么问题？
- 更好的拥抱了函数式，彻底改变了react的编程风格,函数即组件
- 更好的实现了关注点分离
hooks是什么
- hook是一种通知机制，在react中是一种特殊的函数
useState
是允许你在 React 函数组件中添加 state 的 Hook
useMemo/useCallback
useMemo和useCallback其实是两个低频能力。 总体来说，它们和useRef能力是相似的，都是在闭包间同步一个per virtualdom instanceper location的值。类似一个静态的，基于词法作用域的缓存- 作用不太大，大都属于微优化
用处
- 减少闭包，在onclick方法中使用
- 减少复杂的计算(理论上复杂计算不应该在这里出现，可以放在服务端或者service worker)
- 阻止子组件更新
// 阻止子组件更新
function ParentComponent(props){
return useMemo(() => <ChildComponent someProp={props.fooProp} />, [props.someProp])
}
function ChildrenComponent() {
return <div>....</div>
}
if(...) {
useEffect(() => {}, [])
}
<Button text="点我" />
// 到
<Button text="请按键" />
function FiberNode(...) {
// 工作类型(Fiber类型)
this.tag = tag;
// ReactElement.key
this.key = key;
// ReactElement.type
this.elementType = null;
// Fiber
// 执行完当前工作返回的Fiber
this.return = null;
// 当前Fiber的（最左侧）子Fiber
this.child = null;
// 当前Fiber的下一个同级Fiber
this.sibling = null;
}
render = Reconciler(HostConfig)
-
VirtualDom： 对组件层级结构的描述
-
Reconciliation：计算DOM DIFF
-
HostConfig：对react渲染对应具体端（dom，react-native）的封装
- 删除元素的能力
- 改变元素属性的能力
- 插入元素的能力
- 替换元素的能力
虚拟DOM DIFF计算出更新步骤之后，由reconsiler（调和器）来将三部分结合起来：
提供DOM DIFF的模块叫react-reconciler
reconciler
- 如果是新节点，创建新Fiber
- 计算阶段：如果是变更，那么计算出Work In Progress Fiber
- 计算阶段：render库执行，利用react的DOM DIFF算法进行更新
- 提交阶段：应用更新
2、上述情况发生时，render库（如ReactDOM）会触发Fiber的执行
- 跟节点render函数调用（例如： ReactDOM.render( ,) ）
- setState
- props变更
1、驱动Fiber的执行：
Fiber的执行
-
计算阶段（可中断）
- 计算
worInProgress Fiber - 进行
DOM Diff，计算DOM的更新
- 计算
-
提交阶段（不可中断）
- 提交所有的更新
Fiber更新的两个阶段
- 当发生变更时，产生
workInProgress Fiber，与原来的Fiber之间互相引用。 DOMDiff发生在Current Fiber和workInProgress Fiber之间- 这是一种处理并发的技巧，叫
Copy On Write—— 当有变更时复制原有对象，变更完成之后替换原有对象
Fiber的workInProgress
- React Element描述组件的信息、组件的层级关系
- Fiber描述组件的Diff工作的调用关系
- Dom对应实际的渲染效果
DOM、Element、Fiber什么关系
- Fiber是React Element数据的镜像
- Fiber是一份Diff工作
- Fiber模拟函数调用关系
是什么
Fiber
- 没有key，对比和替换
- 有key，根据key来对比，然后再递归这个节点的子节点
乱序的节点
- 为什么不再深入diff，因为太麻烦了。是一个O(n3)算法
不同类型的节点直接替换掉
相同类型的节点替换属性
DOM-DIFF
React原理
- hooks是声明式的，
if式分支控制，不能一起使用 - 实现层hooks是用一个链表维护的，react是按照hooks的声明位置存储的
