200行程式碼實現 mini-React

lucifer210發表於2018-07-05

介紹

為了加深自己對 React 理解,同時也能幫助到其他想要深入理解 React 原理的同學。 我寫了這篇文章並開了一個倉庫。所有的程式碼都可以在這個倉庫找到,具體使用方法,請檢視README。

目前實現的功能包含純函式支援,class支援,state支援,生命週期支援,jsx支援(這個並不能說是mini-react支援)。 後續內容持續更新中

我給他命名為 mono-react

先行知識

學習這個課程之前呢,需要各位對 React 的 API 有一定的瞭解。

如果完全不瞭解的話,不建議您繼續往下看。

如果你已經具備了相關 React 的知識,那麼就讓我們開始吧!

開始學習

如果你想學習的話,請切換到對應分支。

比如你想學習第一課,就切換到 lecture/part1 分支 ,想學習第二課,就切換到 lecture/part2 分支,依次類推。

課程列表

現在已經完成了 1-5 章內容的草稿,並計劃在 2018-07 月份進行完善和糾錯。 其他章節部分計劃八月份實現。如果你特別感興趣,請在 issue 區域留言,也許會提前也不一定。

草稿,隨時可能變更

  1. 最簡單的實現,包括 vdom 結構,createElement,ReactDOM.render

  2. 增加 Class 的支援

  3. 增加 JSX 的支援

  4. 增加 state 支援

  5. 增加宣告週期

  6. 增加 dom-diff(調和演算法)

  7. 增加 context api

  8. 增加 ref 支援

  9. 增加 PureComponent

...未完待續

相關文章