1.react中做的就是践行"代数效应"
代数效应：是函数编程中的一个概念，用于副作用从函数中分离。一个函数中的执行结果，与函数中的代数x,y,z有关，但是它只是关心结果，不关心过程。
function getName(user) {
let name = user.name;
if (name === null) {
name = perform ‘ask_name‘;
}
return name;
}
function makeFriends(user1, user2) {
user1.friendNames.add(getName(user2));
user2.friendNames.add(getName(user1));
}
const arya = { name: null };
const gendry = { name: ‘Gendry‘ };
try {
makeFriends(arya, gendry);
} handle (effect) {
if (effect === ‘ask_name‘) {
resume with ‘Arya Stark‘; //它允许我们跳回执行效应的代码继续执行，并且可以携带一些值。perform resume不需要区分同步异步。
}
}
2.代数效应在React中的应用
1. useState、useReducer、useRef这样的HOOK。只需要关心逻辑部分的代码。
2. suspence:一种机制，Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。过程：数据加载，渲染，完成。
3.代数效应与Generator
异步可中断更新：更新在执行的过程中可能会被打断（浏览器时间分片用尽或有更高优任务插队），当可以继续执行时回复之前执行的中间状态。
Generator：缺点是执行的中间状态是上下文关联的
4.Fiber
含义：比线程控制的更加精密的并发处理机制。
react的Reconciler基于Fiber节点实现。
function FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode, ) { // 作为静态数据结构的属性 this.tag = tag; this.key = key; this.elementType = null; this.type = null; this.stateNode = null; // 用于连接其他Fiber节点形成Fiber树 this.return = null; this.child = null; this.sibling = null; this.index = 0; this.ref = null; // 作为动态的工作单元的属性 this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; // 调度优先级相关 this.lanes = NoLanes; this.childLanes = NoLanes; // 指向该fiber在另一次更新时对应的fiber this.alternate = null; }
Fiber树-------可以对用相应的DOM树。
5.Fiber的工作原理：内部的原理为代数效应。
如何更新DOM树？React使用“双缓存”来完成Fiber树的构建与替换——对应着DOM树的创建与更新。
双缓存：在内存中构建并直接替换
6.React Fiber
问题：造成页面渲染卡顿，失帧问题。JS计算+页面布局+页面绘制。JS持续计算，占用大量的实践，导致页面无法及时的更新。
解决方法：旧版react采用递归的方式，一直执行到栈空为止。Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。
//window.requestIdleCallback()会在浏览器空闲时期依次调用函数，这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这些延迟触发但关键的事件产生影响。函数一般会按先进先调用的顺序执行，除非函数在浏览器调用它之前就到了它的超时时间。
7.react16架构
原文：https://www.cnblogs.com/lyq1996/p/14451916.html