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来显示
    Hello World
  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中的内容

你可能感兴趣的