React高级内容

原课程链接->React16.4开发简书项目从零基础入门到实战

第4章React高级内容

4-1React developer tools安装及使用

1. 教程：(Chrome浏览器安装React Developer Tools)

4-2PropTypes与DefaultProps的应用

1. PropTypes的使用

       // 1. 引入
       import PropTypes from 'prop-types';
       // 2: 使用->对TodoItem这个组件 做属性的校验
       TodoItem.propTypes = {
       // 3. 当父组件没有传递notest，并且子组件使用notest时, 不会报错
           notest: PropTypes.string,
       // 4. 当父组件没有传递test，并且子组件使用test时，会提出警告，因为加入了 "isRequired"
           test: PropTypes.string.isRequired,
       // content类型或者是数字，或者是字符串
           content: PropTypes.arrayOf(PropTypes.number, PropTypes.string),
           deleteItem: PropTypes.func,
           index: PropTypes.number,
       }
       export default TodoItem
   

2. defaultProps的使用

       // 5.设置test的默认值
       TodoItem.defaultProps = {
           test: 'hello world',
       }
   

3. 关于这些属性-官网

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

1. 当组件的state或者props发生改变的时候，render函数就会重新执行，组件就会被重新渲染
2. 当父组件的render函数被运行时，它的子组件的render函数都将被重新运行一次

4-4React中的虚拟DOM

1. 如果说没有虚拟DOM，我们需要怎么做？

       方案1：
           1. state中的数据
           2. JSX模板
           3. 数据 + 模板 结合，生成真实的DOM，来显示
           4. state发生改变
           5. 数据 + 模板 结合，生成真实的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元素
           缺陷：
               性能提升并不明显，因为，虽然它相比方案1 节约了 替换整个DOM 的性能，但是它损耗了 新的和原始的DOM 做对比的性能
       方案3：
           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中的内容
           优点：
               性能提升了，
               它使跨端应用得以实现(既可以开发网页应用，又可以开发原生应用)
                   分析：移动端原生应用里面(Andorid或者IOS)是不存在DOM的概念的，假定没有虚拟DOM，那么代码只能运行在浏览器中。 但是有了虚拟DOM，原生应用就可以将虚拟DOM，转为原生应用的组件
           注意： 
               用JS创建一个JS对象很简单，但是用JS创建一个DOM的时候需要调用WebApplication级别的一个API，这种级别的API性能损耗非常大
       ```
   
   

4-5深入了解虚拟DOM

1. 回到代码中，讲解之前的JSX

   其实下面的代码知识JSX模板，并不是真实的DOM
   return (
       <div onClick={this.handleClick}>
           {test} - {content}
       </div>
   )
   JSX到真实DOM： JSX ->通过createElement -> 虚拟DOM( JS对象 )-> 真实的DOM
       return <div>item</div> 经过createElement
       <==>等价于
       return React.createElement('div', {}, 'item');