Giter Club home page Giter Club logo

learn-react-source-code's Introduction

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

learn-react-source-code's People

Contributors

cyan33 avatar sabertazimi avatar anothertempore avatar lazysheep666 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.