2019-04-20 23:13:30 weixin_43606158 阅读数 14680
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

虚拟DOM的介绍:
虚拟DOM就是一个真实DOM转换的JS对象。
虚拟DOM的机制:
在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的俩次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

虚拟DOM性能更快的原因:
真实的DOM中有各种DOM事件,属性,而虚拟DOM中没有那么多无用的东西,所以当浏览器去进行遍历的时候,遍历虚拟DOM的速度是比真实DOM快非常非常多的,而且虚拟DOM还有diff算法,又将算法的复杂度降低了一个维度。

关于虚拟DOM的diff算法请看:https://blog.csdn.net/weixin_43606158/article/details/89422894

2019-12-24 17:25:38 weixin_38886539 阅读数 17
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

react-router与react-router-dom使用时的区别

1、React-router与React-router-dom的API对比

React-router:提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的api

React-router-dom:提供了BrowserRouter、Route、Link等api,可以通过dom操作触发事件控制路由。

2、React-router与React-router-dom的功能对比

React-router:实现了路由的核心功能

React-router-dom:基于React-router,加入了一些在浏览器运行下的一些功能。
(例如:Link组件会渲染一个a标签,BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步, HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步)

3、React-router与React-router-dom的写法对比

React-router不能通过操作dom控制路由,此时还需引入React-router-dom。
import {Switch, Route, Router} from ‘react-router’;
import {HashHistory, Link} from ‘react-router-dom’;

React-router-dom在React-router的基础上扩展了可操作dom的api
import {Swtich, Route, Router, HashHistory, Link} from ‘react-router-dom’;

4、React-router与React-router-dom的路由跳转对比

React-router:router4.0以上版本用this.props.history.push(’/path’)实现跳转;
       router3.0以上版本用this.props.router.push(’/path’)实现跳转

React-router-dom:直接用this.props.history.push(’/path’)就可以实现跳转

总结:

在使用React的大多数情况下,我们会想要通过操作dom来控制路由,例如点击一个按钮完成跳转,这种时候使用React-router-dom就比较方便。

安装也很简单:npm i react-router-dom --save

从react-router-dom中package.json的依赖就可以看出:react-router-dom是依赖react-router的,所以我们使用npm安装react-router-dom的时候,不需要npm安装react-router。

2018-07-11 13:51:19 gyq04551 阅读数 289
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁
react 虚拟dom的优点:
数据渲染到页面的方式:
 1).手动for循环整个数组;
 2).使用模板引擎;
 缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。

如何提高性能?
 按需渲染:只更新数据变化的那一条数据(DOM树)。
 原理:获取内存中的新旧两颗DOM树,进行对比,把数据发生变化的进行按需更新

如何获取新旧两颗DOM树?实现对比?
 因为浏览器中并没有直接提供获取DOM树的api;因此我没无法拿到浏览器内存中的DOM树;所以只能手动模拟DOM树;
 
怎么模拟DOM树?
 利用js:其实也是面向对象思想。比如我们要模拟
 '<div class="testDiv" name="我是DIV">我是div<h1>嵌套H1</h1><div>' 
 /*模拟部分*/
 var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         "我是DIV",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
 /*如果部分数据发生更新*/
  var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         /*这条数据发生变话。只需要标记这条数据即可*/
         "我是DIV1231231231231231231231231",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
以上就是react的虚拟dom的原理和优点; (本质:就是利用js对象的行为来模拟页面上DOM的嵌套关系就是虚拟DOM)从而实现高效更新;

怎么实现对比呢?
 Diff算法;
 tree diff:新旧两颗DOM树逐层对比的过程就是Tree Diff;当整颗DOM树对比完毕,则所有需要更新的元素,必然能够找到。 (组件对比-每一层的对比(component diff)),元素对比(element diff));



2018-02-05 14:22:15 xieamy 阅读数 480
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

react全家桶索引

babel
babel编译器原理(解析、转化、代码生成)
babel插件开发

react
react源码结构
react启动流程
react动画
react组件生命周期
react-dom基本实现
react diff算法核心
主流虚拟dom diff算法对比
react渲染性能优化
react服务端渲染
react 16 新特性
主流类react框架对比
类react框架核心技术难点

redux
redux来源,flux核心思想
redux中间件实现机制
redux源码分析
react-redux源码分析
主流数据状态容器对比(redux、mobx等)

redux-saga
高阶使用(channel、cancel、take等等)
redux-saga源码实现
主流异步中间件对比(redux-thunk, redux-saga,redux-observable)
rxjs调研

react-router
react-router4 基本使用
react-router4源码实现

dva
dva源码分析

antd
antd组件库基本理念
antd常用基础组件实现(方便基于此二次开发)
antd 与 rc-component 结构
antd form实现

webpack
webpack基本使用
webpack 插件开发
weback tree-sharking分析
webpack性能优化
webpack源码分析

react-native
react-natvie 基本指引
react-natvie核心原理
实践

基于实际项目讲解,深度剖析各个模块之间的协作以及实际运作过程

需要掌握的
异步发展过程:callback、promise、generator、co、async/await等异步流程控制(async和await的实现原理)

React全家桶
1.react
1.为什么采用组件化的方式
2.react环境搭建
3.JSX语法的使用(createElement,render的原理实现)
4.JSX表达式的用法
5.JSX的属性(className,htmlFor,style,dangerouslyInnerHTML)
6.组件使用(类声明,函数声明)
7.组件的属性和状态(属性的检验以及setState详解)
8.复合组件
9.组件的声明周期
10.受控组件 非受控组件
11.children属性的使用
12.项目实战留言板
2.redux
1.手写redux库(getState,createStore,dispatch,subscribe,applyMiddlewar e,combineReducer,compose,bindActionCreators)
3.react­redux
1.高阶组件的原理和使用
2.react高级属性context上下文
3.react-redux实现todoList
4.手写react-redux(Provider和connect原理解析)
4.中间件
1.手写applyMiddle和compose(中间件原理)
2.手写redux-logger,redux-thunk,redux-promise
3.手写自定义本地缓存中间件
5.react­router­dom
1.HashRouter,BrowserRouter的区别
2.Link,NavLink的使用(extact绝对匹配,state带参数跳转)
3.Route组件三种渲染方式(component,render,children)
4.路由参数以及子路由的使用(params)
5.withRouter,PrivateRouter的用法
6.Prompt组件阻止跳转
7.重定向(Redirect组件)
8.手写HashRouter Route等常用组件
6.React­Transition­group
1.react动画的实现原理
2.使用React-Transition-group库开发todo动画应用
7.项目实战React
1.webpack环境搭建
2.底部页签导航
3.动画
4.redux改变课程分类
5.实现头部轮播图
6.课程列表列表
7.下拉刷新
8.上拉加载
9.记录滚动条位置
10.课程详情页面
11.用户注册
12.用户登录
13.受保护的我的课程页面
14.Redux开发插件
8.源码级Vue+React深度解析与实现
1.手写Vue双向绑定实现
2.Vue虚拟DOM和React虚拟DOM的区别
3.如何实现一个 Virtual DOM 算法
4.通过源码彻底搞明白setState的更新机制
5.手写包含虚拟DOM、事件监听、基本组件生命周期等功能的React库

2017-05-04 16:15:04 zhouziyu2011 阅读数 10992
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

React非常快速是因为它从不直接操作DOM

虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。

在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM。

虚拟DOM具有批处理和高效的Diff算法,可以无需担心性能问题而随时“刷新”整个页面,因为虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作。

在实际开发中无需关心虚拟DOM是如何运作的,但理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也有很大帮助。


1、传统App与React App的对比:

传统App:


React App:


innerHTML:render html字符串 + 重新创建所有 DOM 元素

虚拟DOM:render 虚拟DOM + diff + 更新必要的 DOM 元素


2、虚拟DOM的原理:

React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是对虚拟DOM进行。当数据变化时,React会自动更新虚拟DOM,然后将新的虚拟DOM和旧的虚拟DOM进行对比,找到变更的部分,得出一个diff,然后将diff放到一个队列里,最终批量更新这些diff到DOM中。



3、虚拟DOM的优点:

最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染。


4、虚拟DOM的缺点:

首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。


5、虚拟DOM的理解误区

对虚拟DOM的理解往往停留在:通过JavaScript对象模拟原生DOM,加上DOM Diff 极大提升了DOM操作的性能。然而,虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象),这在浏览器中使用 React时不是特别明显,因为写的DOM标签跟原生的没有区别,并且最终都被渲染成了DOM,在React Native中将会有很好的说明。

Vue对比React

阅读数 18

vue react框架对比

阅读数 107

没有更多推荐了,返回首页