GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - cyan33/learn-react-source-code: Build react from scratch (code + blog)

BranchesTags
Open more actions menu

Latest commit

 

History

41 Commits
41 Commits

Folders and files

NameName
Last commit message
Last commit date
blog
blog
 
 
demo
demo
 
 
dilithium
dilithium
 
 
.gitignore
.gitignore
 
 
.travis.yml
.travis.yml
 
 
README.md
README.md
 
 

Repository files navigation

Learn React Source Code

  • Day1 - Guidance
  • Day2 - Mounting
  • Day3 - Mounting - Contd
  • Day4 - Updating - The Process Flow
  • Day5 - Updating - Diff
  • Day6 - Updating - Real DOM Update

Read it Online

What You'll Learn

  • React 是怎样将 JSX mount 成为真正的 DOM 节点的
  • React 是怎样用 Virtual DOM 的 Diff 算法更新 Element tree,然后映射到真正的 DOM 变化的
  • 什么是 Virtual DOM,它的优势是什么,以及它和 React 是怎样结合使用的
  • 对 React 的核心功能有一个更深入的理解

What This Doesn't Cover

由于这是一个 React 的最小实现,它并没有实现 React 的全部功能,以下这些功能是这个代码库没有涵盖到的。(这个 list 在 Paul 2016 的演讲中被提及到)

  • defaultProps
  • propTypes
  • keys
  • refs
  • batching
  • events
  • createClass
  • warnings
  • browser
  • optimizations
  • rendering null
  • DOM updates
  • SVG
  • life cycle hooks
  • error boundaries
  • perf tooling and optimizing
  • PureComponents
  • functional components

但是当你读完整个博客和代码后,相信你已经会有对实现这其中的几个功能的一些初步思考。

Run the Demo

> cd ./demo
> npm install
> npm run watch

Open the index.html manually.

Disclaimers

  1. Most code of Dilithium you've seen in this repo is originally written by @zpao, at building-react-from-scratch, but it's also slightly changed here. I'll keep digging some of the listed features and adding blog and source code on top of the current codebase.

  2. The diffing algorithm used in the Dilithium is the stack reconcilliation, not the new fiber architecture.

  3. The code snippets in the blogs are sometimes somewhat different from that in the codebase. This is for better readablity and a more smooth learning curve.

Liscense

MIT@Chang

About

Build react from scratch (code + blog)

Topics

reactstack-reconciliation

Resources

Readme
Activity

Stars

208 stars

Watchers

9 watching

Forks

23 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.