200行代码实现 mini-React

2,311 阅读1分钟

介绍

为了加深自己对 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

...未完待续