# TodoList

**Repository Path**: Gorgio_Liu666/todo-list

## Basic Information

- **Project Name**: TodoList
- **Description**: react基础学习实践
- **Primary Language**: JavaScript
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-11-04
- **Last Updated**: 2021-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## TodoList learning demo
### 声明式的开发
### 可以与其他框架并存
### 组件化
### 单向数据流
### 视图层框架
### 函数式编程

### 虚拟DOM出现的原因：
#### 1、state 数据
#### 2、JSX 模板
#### 3、数据 + 模板 结合，生成真实的DOM，来显示
#### 4、state 发生改变
#### 5、数据 + 模板 结合，生成真实的DOM，替换原始DOM
###     缺陷：
####       第一次生成了一个完整的DOM片段
####       第二次生成了一个完整的DOM片段
####       第一次的DOM替换第一次的DOM，非常耗性能

#### 1、state 数据
#### 2、JSX 模板
#### 3、数据 + 模板 结合，生成真实的DOM，来显示
#### 4、state 发生改变
#### 5、数据 + 模板 结合，生成真实的DOM，并不直接替换原始的DOM
#### 6、新的DOM (DocumentFragment) 和 原始的DOM 做比对，找差异
#### 7、找出input框发生了变化
#### 8、只用新的DOM中的input元素，替换掉老的DOM中的input元素
###     缺陷：
####        性能的提升并不明显

#### 1、state 数据

#### 2、JSX 模板

#### 3、数据 + 模板 生成虚拟DOM (虚拟DOM就是一个JS对象，用它来描述真实DOM) (损耗性能)
####    ['div', {id: 'abc'}, ['span',{}, 'hello world']]

#### 4、用虚拟DOM的结构生成真实的DOM来显示
####    <div id='abc'><span>Hello World</span></div> 

#### 5、state 发生变化
####
#### 6、数据 + 模板 生成新的虚拟DOM (极大的提升了性能)
####    ['div', {id: 'abc'}, ['span',{}, 'bye bye']]

#### 7、比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容 (极大的提升性能)
####    
#### 8、直接操作DOM，改变span中的内容
####        JSX => createElement =>  虚拟DOM (JS对象) => 真实的DOM

####    性能的提升明显
###     优点：
####        1、性能提升了。
####        2、它使得跨端应用得以实现。React Native。