ljc_react

网上react核心机制的文章有很多，但是介绍react整个完整的核心流程的却很少，该demo适合想深入了解react核心机制与整体流程的人。我在这里把react从定义组件到渲染以及更新的核心部分都写在lib文件中，主要涉及到五个核心文件。 * React.js * 包括Component和createElement的定义 * ReactDom.js * 定义了render方法 * Diff.js * 实现diff算法 * Patch.js * 将使用diff算法得到的差异应用到页面中 在Issues中有对每个文件进行详细的介绍

Usage no npm install needed!

<script type="module">
  import ljcReact from 'https://cdn.skypack.dev/ljc_react';
</script>

README

myReact

网上react核心机制的文章有很多，但是介绍react整个完整的核心流程的却很少，该demo适合想深入了解react核心机制与整体流程的人。我在这里把react从定义组件到渲染以及更新的核心部分都写在lib文件中，主要涉及到五个核心文件。

  • React.js
    • 包括Component和createElement的定义
  • ReactDom.js
    • 定义了render方法
  • Diff.js
    • 实现diff算法
  • Patch.js
    • 将使用diff算法得到的差异应用到页面中 在Issues中有对每个文件进行详细的介绍

Install

method one

git  clone https://github.com/LongJinCen/myReact.git
npm install
npm run start

method two

npm install ljc_react
cd node_modules
cd ljc_react
npm install
npm run start

Usage

在webpack.config.js的entry属性中配置你想要运行的src目录下的单个入口文件，仅支持单个文件，例如你想要运行src下面的index.js，那么将entry属性改为./src/index.js，修改配置文件之后别忘了重启项目，之后执行的将是该文件，同时支持CommonJs和es6的import模块。

在这里请使用es6的class来声名一个组件，我们可以像使用react一样使用该demo,包括继承React.Component,定义一个render方法，定义state并调用setState改变它。 请务必先查看并运行提供的两个测试文件来帮助你理解如果使用提供的源码

需要注意的是

  1. 由于这里没有使用jsx语法，所以使用的是模板字符串的形式，也就是你的render返回的必须是一个字符串，而且在React.createElement的实现上也和官方的有所差别，不过最终都是将render返回的转换为一个virtul-dom对象。
  2. 在这里不能像react里面那样使用组件，如果你想使用一个组件，请使用组件.render()的方式通过模板字符串嵌入到当前结构中
  3. 不能绑定事件，这里由于使用的是模板字符串，要绑定事件有很大的难度，所以你在测试的过程中不能绑定事件。虽然没有绑定事件，但是事件引起的state改变->diff->dom操作 这一流程仍然写在源码中

More

关于该demo具体的介绍请查看Issues中对react执行流程的介绍,另外由于水平有限，如有错误的地方，请指出

reference

https://github.com/livoras/blog/issues/13

http://huziketang.mangojuice.top/books/react/lesson1