基于官方 React 16.8.6 的源码并使用 TypeScript 实现的 React
- 源码解析一
fiberRoot
和fiber
- 源码解析二
expirationTime
优先级与过期时间 - 源码解析三 创建元素
- 源码解析四
ReactDOM.render()
从入口说起 - 源码解析五
schedule
内的获取优先级 - 源码解析六
schedule
的整体流程 - 源码解析七
schedule
调度前准备 - 源码解析八
schedule
执行调度 - 源码解析九
render
阶段 - 源码解析十
beginWork
- 源码解析十一
updateClassComponent
- 源码解析十二
reconciler childFiber
- 源码解析十三
completeUnitOfWork
- 源码解析十四
completeWork
- 源码解析十五
commitRoot
- 源码解析十六
requestIdleCallback
的polyfill
- 源码解析十七 异步渲染
- 源码解析十八 事件系统
- 源码解析十九 事件插件注入
- 源码解析二十 事件对象
SyntheticEvent
及事件池 - 源码解析二十一 事件绑定
- 源码解析二十二 事件触发
- 源码解析二十三
hook
的结构与本质 - 源码解析二十四
hook
的具体实现 - 源码解析二十五 各个
hook
的实现 - 源码解析二十六
useEffect
与useLayoutEffect
- 源码解析二十七
hook
与re-render
- 源码解析二十八
context
- Fiber
- DOM render
- Fiber Reconciler
- class component and setState
- 事件机制
- function component and hook
- 一些常用的api,如memo,fragment等
- context
git clone https://github.com/LuSuguru/fake-react.git
yarn watch
yarn link
cd example
yarn link fake-react
yarn start
import { React, ReactDOM } from 'fake-react'
const { PureComponent } = React
class Test extends PureComponent {
state = {
test: ''
}
onChange = (e) => {
this.setState({ test: e.target.value })
}
componentDidMount() {
console.log('componentDidMount')
}
render() {
const { test } = this.state
const { onChange } = this
return (
<input type="text" value={test} onChange={onChange} />
)
}
}
ReactDOM.render(<Test />, document.getElementById('root'))
import { React, ReactDOM } from 'fake-react'
const { memo, useCallback, useState } = React
function Component() {
const [test, setTest] = useState('')
const onChange = useCallback((e) => {
setTest(e.target.value)
}, [])
return (
<input type="text" value={test} onChange={onChange} />
)
}
const Test = memo(Component)
ReactDOM.render(<Test />, document.getElementById('root'))
在工作中自己平时一直使用 React 开发业务,使用的过程中经常会有困惑,然后便去看博客,查文档。照着别人的分析文写一个简易版的,貌似已经掌握它了?
渐渐地,我发现自己只懂了那套皮毛概念和很零散的原理,哦!它使用了vDOM,有diff算法,列表渲染使用key的原因,setState是异步的,有自己实现的一套事件机制等。但是它是如何实现事件机制的,setState的过程,异步的原因等,依然不知。
索性,就看它源码吧!相信有了一个系统的研究后,疑问会少很多。嗯,fork仓库,clone下来,刷。磕磕绊绊了1个半月,虽然很多地方啃起来都无比艰辛,但总算是全部啃完。
开这个项目的初衷也是为了记录自己的源码阅读过程,现在基本实现了 React 16.8的90%功能,便于自己学习研究和掌握其原理