2025-05-04 日报 Day176

今日的鸡汤

生活的真谛从来都不在别处，就在日常一点一滴的奋斗里。

今日学习内容

1、https://react.iamkasong.com/

今日笔记

Fiber架构的心智模型：
1、代数效应：代数效应是函数式编程中的一个概念，用于将副作用从函数调用中分离。代数效应能够将副作用（例子中为请求图片数量）从函数逻辑中分离，使函数关注点保持纯粹。
你可以这样理解：
• 普通函数：给定输入就产生输出，没有副作用。
• 副作用函数：会打印、抛异常、发送网络请求、读写文件、产生随机数等。
• 代数效应函数：不直接执行副作用，而是声明某种效果（effect），由外部的“处理器（handler）”来定义它的行为。

2、代数效应在React中的应用：
那么代数效应与React有什么关系呢？最明显的例子就是Hooks。
对于类似useState、useReducer、useRef这样的Hook，我们不需要关注FunctionComponent的state在Hook中是如何保存的，React会为我们处理。
我们只需要假设useState返回的是我们想要的state，并编写业务逻辑就行。

function App() {
  const [num, updateNum] = useState(0);
  
  return (
    <button onClick={() => updateNum(num => num + 1)}>{num}</button>  
  )
}

代数效应与Generator：
从React15到React16，协调器（Reconciler）重构的一大目的是：将老的同步更新的架构变为异步可中断更新。
异步可中断更新可以理解为：更新在执行过程中可能会被打断（浏览器时间分片用尽或有更高优任务插队），当可以继续执行时恢复之前执行的中间状态。
这就是代数效应中try…handle的作用。
其实，浏览器原生就支持类似的实现，这就是Generator。React没有采用Generator实现协调器。
代数效应与Fiber：Fiber并不是计算机术语中的新名词，他的中文翻译叫做纤程，与进程（Process）、线程（Thread）、协程（Coroutine）同为程序执行过程。

在很多文章中将纤程理解为协程的一种实现。在JS中，协程的实现便是Generator。
所以，我们可以将纤程(Fiber)、协程(Generator)理解为代数效应思想在JS中的体现。

React Fiber可以理解为：
React内部实现的一套状态更新机制。支持任务不同优先级，可中断与恢复，并且恢复后可以复用之前的中间状态。
其中每个任务更新单元为React Element对应的Fiber节点。