React源码解析

说明

• 本源码可从https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/CHANGELOG.md 查看版本号，建议直接 fork，若从官网下载源码，考虑到 文件名称被rename 的问题，建议版本号从16.9.0开始 官网 release 地址： https://github.com/facebook/react/releases?after=v16.10.2

• 如果找不到对应的函数名/文件名，建议全局搜索里面的代码块进行查找

API

React源码解析之React.createElement()和ReactElement()

React源码解析之React.Component()/PureComponent()

React源码解析之React.createRef()/forwardRef()

React源码解析之React.createContext()

React源码解析之React.children.map()

React.forwardRef的应用场景及源码解析

---

FiberScheduler

React源码解析之ReactDOM.render()

React源码解析之RootFiber

React源码解析之Update和UpdateQueue

React源码解析之ExpirationTime

React源码解析之setState和forceUpdate

React源码解析之FiberRoot

React源码解析之scheduleWork（上）

React源码解析之scheduleWork（下）

React源码解析之requestHostCallback

React源码解析之flushWork

React源码解析之renderRoot概览

React源码解析之workLoop

---

ComponentUpdate

React之childExpirationTime

React源码解析之FunctionComponent（上）

React源码解析之FunctionComponent（中）

React源码解析之FunctionComponent（下）

React源码解析之updateClassComponent（上）

React源码解析之updateClassComponent（下）

React源码解析之PureComponet的浅比较

React源码解析之IndeterminateComponent

React源码解析之updateHostComponent和updateHostText

---

NodeUpdate

React源码解析之completeUnitOfWork

React源码解析之completeWork和HostText的更新

React源码解析之HostComponent的更新(上)

React源码解析之HostComponent的更新(下)

---

错误处理

React源码解析之「错误处理」流程

---

Commit阶段

React源码解析之commitRoot整体流程概览

React源码解析之Commit第一子阶段「before mutation」

React源码解析之Commit第二子阶段「mutation」(上)

React源码解析之Commit第二子阶段「mutation」(中)

React源码解析之Commit第二子阶段「mutation」(下)

React源码解析之Commit最后子阶段「layout」(附Commit阶段流程图)

---

React-Hooks

ReactHooks源码解析之useState及为什么useState要按顺序执行

ReactHooks源码解析之useEffect

---

好文分享

图解React ——作者：公里柒(KM.Seven)

React源码揭秘1 架构设计与首屏渲染——作者：卡颂

这可能是最通俗的 React Fiber(时间分片) 打开方式——作者：荒山

走进React Fiber 架构——作者：intopiece_槟

---

微信公众号

每周分享前端干货和生活感悟！