【文件属性】:
文件名称:TinyReact:为了学习React最具原理而开发的小型React
文件大小:98KB
文件格式:ZIP
更新时间:2021-03-14 01:22:37
JavaScript
小React
为了学习React的基本原理,模仿React功能开发的小型库,以及一个测试的TodoList。
项目启动说明
# 安装依赖
$ npm install
# 运行项目
$ npm start
运行项目后打开根目录下的index.html文件进行TodoList效果预览
TinyReact结构解析
文件组织结构图:
TinyReact相关的文件全部放在src下。
Component.js
类组件所继承的基础组件。
主要处理以下事情:
props的初始化
赋值生命周期方法初始值
定义this.setState方法
合并新的state并更新
重新调用render方法
调用diff方法进行对比和渲染
createElement.js
定义JSX所需的方法,将JSX返回的数据转换为VirtualDOM对象。
默认Babel在处理JSX的时候是转化为React.createElemen
【文件预览】:
TinyReact-master
----example()
--------config.js(95B)
--------index.js(121B)
--------List.js(1KB)
--------Footer.js(2KB)
--------Header.js(1KB)
--------Title.js(161B)
--------Action.js(1KB)
--------App.js(1KB)
----.babelrc(172B)
----rollup.config.js(779B)
----images()
--------todo-list-demo.png(19KB)
--------mind-map.png(47KB)
----package.json(619B)
----index.html(281B)
----LICENSE(1KB)
----package-lock.json(72KB)
----src()
--------utils.js(807B)
--------unmountNode.js(1KB)
--------updateNodeElement.js(2KB)
--------createDOMElement.js(978B)
--------index.js(186B)
--------diffComponent.js(1KB)
--------updateComponent.js(1KB)
--------mountElement.js(477B)
--------mountNativeElement.js(786B)
--------createElement.js(684B)
--------mountComponent.js(1KB)
--------render.js(172B)
--------updateTextNode.js(258B)
--------Component.js(1KB)
--------diff.js(5KB)
----.gitignore(29B)
----README.md(7KB)