aFcFzF / fake-react

基于官方 React 16.8.6 的源码并使用 TypeScript 仿写的 React,实现了 16.8.6 的90%功能

fake-react

基于官方 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

使用

build

  git clone https://github.com/LuSuguru/fake-react.git

  yarn watch 
  yarn link 

test

  cd example

  yarn link fake-react
  yarn start

class component

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'))

function component

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%功能，便于自己学习研究和掌握其原理