react学习之路————react基础知识

react基础知识

1.什么是pwa？

pwa=渐进式web应用

pwa的好处：实现类似于app的离线缓存功能

react中的registerServiceWorker+manifest.json就是用来实现这个功能的

2.react定位

2.1  声明式开发：面向数据(区别于jquery和原生js：面向过程)

* 比如造房子：react提供图纸即可自动进行 ，jquery：需要明确每一步做什么

2.2  单项数据流 ： 为什么要单向数据流？-----父组件向子组件传递值之后，子组件不允许修改父组件中的值，因为一旦修改所有用 到这个值得元素全部改变，不利于定位bug位置

2.3  视图层框架：大型项目中数据传递比较复杂，只有react是远远不够的

2.4  函数式编程：面向测试的编程，如果都是函数的话很容易测试

3.虚拟dom是什么？

以前我也百思不得其解虚拟dom到底是什么？虽然知道有render函数，它是用一个数组来存储标签信息的。

原来虚拟dom就是这个数组。

虚拟dom的本质--------------js对象，如下：

* 虚拟DOM:['div',{id:'abc'},['span',{},'Hello World']]

* 真实DOM：`<div><span>Hello World</span></div>`

4.虚拟dom为什么能够提升性能？

前言：对真实DOM的操作极大耗费性能，而使用js对象来进行数据的比对，性能能得到优化

于是将数据的变化反应到虚拟dom上，更新之后再反应到真实dom上面

diff算法：组件树子上而下来进行比对，如果哪一个不同那么后面的就无需比对直接替换掉了

5.react的生命周期？

* initialization
* mounting
    * componentWillMount:组件即将被挂载到页面时执行(只执行1次)
    * render:页面挂载
    * componentDidMount:页面挂载之后执行(只执行1次)---ajax请求
* updating
    * props
        * componentWillReceiveProps props改变比status改变前面多了一个，从父组件接收了参数，父组件render重新执行之后子组件则会执行
    * shouldComponentUpdate(组件更新前,返回布尔值，是否需要更新)
    * componentWillUpdate
    * render
    * componentDidUpdate
* componentWillUnmount