react学习笔记-类型检查、虚拟DOM（2）

4-1、开发者工具安装

chrome扩展程序中下载React Developer Tools工具，调试工具，处于开发环境时右上角是红色的说明安装成功，显示蓝色是线上环境，如知乎https://www.zhihu.com/signup?next=%2F

4-2、PropTypes类型检查与DefaultProps默认值

// 限制父子组件传值类型，类型校验等
TodoItem.propTypes = {
  test: PropTypes.string.isRequired, //要求必须传
  content: PropTypes. oneOfType(PropTypes.number,PropTypes.string), // 既 
 可以是number又可以是string类型
 // 可以指定一个数组由某一类型的元素组成
 optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 // 可以指定一个对象由某一类型的值组成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  itemDelete: PropTypes.func, // 函数类型
  itemDelete: PropTypes.array, // 数组类型
itemDelete: PropTypes.object, // 对象类型
  index: PropTypes.number, // 数字类型
  index: PropTypes.bool // 布尔类型
}
// 设置默认值
TodoItem.defaultProps = {
  test: 'hello world', //默认值
}

4-3、Props，state与render函数的关系

• 当组件的state或则props发生改变时，render函数就会重新执行
• 当父组件的render函数被运行时，它的子组件的render都将被重新运行一次

4-4、React中的虚拟DOM

第1中方案：

1. state数据
2. JSX模版
3. 数据 + 模版结合，生成真实的DOM来显示
   . state发生改变
4. 数据 + 模版结合，生成真实的DOM，替换原始的DOM

缺陷：

• 第一次生成一个完整的DOM片段
• 第二次生成一个完整的DOM
• 第二次的DOM替换第一次的DOM，非常消耗性能

第2中方案：

1. state数据
2. JSX模版
3. 数据 + 模版结合，生成真实的DOM来显示
4. state发生改变
5. 数据 + 模版结合，生成真实的DOM，并不直接替换原始的DOM
6. 新的DOM（DocumentFragment）和原始的DOM做对比，找差异
7. 找出input狂发生了变化
8. 只用新的DOM中的input元素，替换调老的DOM中的input元素

缺陷：

• 性能的提升并不明显（第6步会消耗一部分性能）

第3中方案：虚拟DOM

1. state数据
2. JSX模版
3. 数据 + 模版结合，生成真实的DOM来显示
   <div id='abc'><span>Hello World</span></div>
4. 生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真DOM）（损耗了性能很低，js操作js比DOM操作消耗很低）
   ['div',{id:'abc'},['span',{},'Hello World']]
5. state发生变化
6. 数据 + 模版生成新的虚拟DOM（极大的提升了性能）
   ['div',{id:'abc'},['span',{},'bye bye']]
7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升了性能）
8. 直接操作DOM，改变span中的内容