React学习记录（1）

一、基本概念

1. PWA: PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用，pwa的目标直指原生app

2. serviceWoker: 本地缓存,无网页可以访问

3. manifest: Web 应用程序可以被缓存，然后在无互联网连接的时候进行访问

4. ReactDOM.render

5. JSX语法

   注释：
   单行
   多行
   css类名 ==》 className
   laber标签的for ==》 htmlFor

6. React中的响应式设计思想和事件绑定

   {}的使用: js表达式
   通过bind()指向react实例
   state不允许我们我们做任何的改变,所以我们不可以直接去修改state,必须先复制一份,修改完成,使用setState方法来更新state

7. react代码的优化: ES6的结构赋值 箭头函数…

8. react父子组件之间的通信：
   父传子: 通过props
   子传父: 父组件先传递方法给子组件,子组件通过父组件的方法,向父组件传值

9. React特点:
   
   propTypes：父组件传递给子组件的值 官网详细
   defaultProps：当父组件没有给子组件传值时，定义的默认值

10. 虚拟DOM是什么？

    虚拟DOM本质是一个js对象，当state改变时，就会触发render函数重新渲染，生成新的虚拟DOM，原始虚拟DOM和新的虚拟DOM进行比较，并没有损耗多大的性能。（真实DOM渲染、比较是极大地损耗性能的。）
    

JSX -----> createElement ------> 虚拟DOM（JS对象）------> 真实DOM

11. 虚拟DOM的优点：

 - 性能提升了
 - 他使得跨端应用得以实现。React  Native（既可以在浏览器应用，又可以在原生app应用）

12. 虚拟DOM中的Diff算法（面试问题）：

    setState：异步，当多次setState时，可以合并成一个，减少虚拟比对的次数

    同层比对： 原始虚拟DOM和新的虚拟DOM进行同层比对，当第一层相同时，直接全部更新，否则进行下一层的比对

    key设置： key尽量不要设置成index，因为当进行添加或删除的时候，index不稳定，会变，比对可能会失败

ps：前三点目前先了解一下，不需要深入学习