React

jemon107623
241 阅读5分钟

1. React简介和特点

1.基本概念

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2.react和vue有什么区别?*

    *框架本质*
        - vue - 本质是 MVVM 框架，由 MVC 发展而来
        - React - 本质是前端组件化框架，不是一个完整的MVC框架，可以认为是MVC中的V（View）
    *声明周期*
        - 声明周期不一样，React为每个组件提供了生命周期钩子函数去响应不同的时刻，组件
        的生命周期分为三个部分：（1）实例化；（2）存在期；（3）销毁&清理期。
    *数据流管理*
        - 数据流管理 ，Vue的思想是响应式，给每个属性设置watcher监听属性改变，更新虚拟DOM，从而更新视图
        - React是单向数据流，数据由容器组件(负责业务逻辑)向展示组件(负责UI管理)传递,
            通常我们会将展示组件抽出来进行复用或者组件库的封装，
            容器组件自身通过state来管理状态，setState更新状态，从而更新UI，通过props将
            自身的state传递给展示组件实现通信
    *模版不同*
        - vue使用模版 模版分离了
        - React使用jsx 使用原生的js代码，解析就会更高效，但是的话就是模版和js混合了，没有分离

    *组件化*
        - React本身就是组件化
        - Vue也支持组件化，但是只在MVVM上扩展出来的，没有那么纯粹

3.react 有什么特点?

声明式设计 −React采用声明范式，可以轻松描述应用

高效 React通过对DOM的模拟，最大限度地减少与DOM的交互

灵活 React可以与已知的库或框架很好地配合

JSX JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

组件 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中

单向响应数据流 React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

2.react中虚拟DOM和Diff算法

 **虚拟DOM**
 React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom
 机制以及其独特的diff算法。
 React中，先将真实的DOM抽象成一个JavaScript对象，也就是虚拟DOM；
 
 - 标准dom机制下，用户在应用上的操作是直接对真实dom进行操作的，
 - 而在react应用中，有一个render函数来虚拟DOM树，用户在应用中对dom的操作其实是对虚拟dom
 的操作，用户的操作产生的数据改变或者state变量改变，就会触发render函数，重新构造一个虚拟DOM树，
 之后再批量的对这些更改进行diff算法计算，对比操作前后的虚拟dom树，把更改后的变化再同步到真实dom上。

 <img src="https://segmentfault.com/img/bVSLNQ?w=639&h=103"/>


 <img src="https://segmentfault.com/img/bVSLOg?w=392&h=95"/>

 标准dom机制下对某一节点在事件函数中做如下操作：

        ```javascript
            var A=document.getElementById('test');
            A.style.backgroundColor = "black";
            A.style.backgroundColor = "red";
            A.style.backgroundColor = "black";
        ```

    如上所示，在标准dom机制下，会对A节点进行三次的dom操作。
    而在react应用的事件函数中进行如上操作时，同样会在虚拟dom上进行三次dom的操作，但在
    真实dom中，它只会执行一次dom操作，
    因为在react虚拟dom机制中，它会把所有的操作都会合并，只会对比刚开始的状态和最后操作
    的状态，两者中找出不同再同步到真实dom中，这就大大减少了真实dom的操作，而众所周知，
    dom操作是很耗性能的，这是react能做到极速渲染的原因之一。

**Diff算法**
 `如何进行新旧虚拟DOM树的对比呢？`
    这里采用的是Diff算法。Diff算法比较复杂，主要的思路是这样的。
    首先，每一次生成的虚拟DOM树上的各个节点都对应唯一的一个id，当第二次生成了新的DOM树时，对原来树上的每一个节点对比新树上对应节点，如果不同，就记录下来这个差异。
    替换节点； 修改属性；对文本内容修改；移动、删除、增加节点；

 **步骤**
 - js对象模拟DOM树
 - 比较新旧虚拟DOM树的差异
 - 找出差异，更新作用到真实的DOM树上
 比如，替换节点就需要调原生JS的repaceChild()接口；对于修改属性，则要调setAttribute()接
 口等等。

<img src="https://segmentfault.com/img/bVSLSc?w=576&h=318">

 在标准dom机制下：在同一位置对比前后的dom节点，发现节点改变了，会继续比较该节点的子节点
 ，一层层对比，找到不同的节点，然后更新节点。

 在react的diff算法下，在同一位置对比前后dom节点,只要发现不同，就会删除操作前的domm节点
 （包括其子节点），替换为操作后的dom节点。

对比两种diff算法，大家可以发现，react的diff算法下，当dom节点更改时，会大大减少dom树的节
点遍历，这也是其另外一个可以实现极速渲染的一个原因。

3.react脚手架的安装

- 第一种方式应用CDN的地址
    ```HTML
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    ```

- 安装脚手架

    ```js
        $ cnpm install -g create-react-app
        $ npx create-react-app my-app
        $ cd my-app/
        $ npm start
    ```

    **问题?create-react-app 执行慢的解决方法**
    
    ```js
       执行完 `npm config get registry`
       如果结果为
       `http://registry.npmjs.org/`

       重新修改一下配置
       npm config set registry https://registry.npm.taobao.org

        -- 配置后可通过下面方式来验证是否成功
        npm config get registry
        --或者--
        npm info express
    ```
avatar
文章
阅读
粉丝