一分钟了解react
一分钟了解react
- 以前我们没有jquery的时候，我们⼤概的流程是从后端通过ajax获取到数据然后使⽤jquery ⽣成dom结果然后更新到⻚⾯当中，但是随着业务发展，我们的项⽬可能会越来越复杂， 我们每次请求到数据，或则数据有更改的时候，我们⼜需要重新组装⼀次dom结构，然后 更新⻚⾯，这样我们⼿动同步dom和数据的成本就越来越⾼，⽽且频繁的操作dom，也使
我我们⻚⾯的性能慢慢的降低。 - 这个时候mvvm出现了，mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更新，dom的更新也可以直接同步我们数据的更改，这个特定可以⼤⼤降低我们⼿动去维护 dom更新的成本，mvvm为react的特性之⼀，虽然react属于单项数据流，需要我们⼿动实 现双向数据绑定。
- 有了mvvm还不够，因为如果每次有数据做了更改，然后我们都全量更新dom结构的话，也没办法解决我们频繁操作dom结构(降低了⻚⾯性能)的问题，为了解决这个问题，react内部实现了⼀套虚拟dom结构，也就是⽤js实现的⼀套dom结构，他的作⽤是讲真实dom在js 中做⼀套缓存，每次有数据更改的时候，react内部先使⽤算法，也就是鼎鼎有名的diff算 法对dom结构进⾏对⽐，找到那些我们需要新增、更新、删除的dom节点，然后⼀次性对 真实DOM进⾏更新，这样就⼤⼤降低了操作dom的次数。 那么diff算法是怎么运作的呢， ⾸先，diff针对类型不同的节点，会直接判定原来节点需要卸载并且⽤新的节点来装载卸载 的节点的位置；针对于节点类型相同的节点，会对⽐这个节点的所有属性，如果节点的所 有属性相同，那么判定这个节点不需要更新，如果节点属性不相同，那么会判定这个节点 需要更新，react会更新并重渲染这个节点。
- react设计之初是主要负责UI层的渲染，虽然每个组件有⾃⼰的state，state表示组件的状 态，当状态需要变化的时候，需要使⽤setState更新我们的组件，但是，我们想通过⼀个组 件重渲染它的兄弟组件，我们就需要将组件的状态提升到⽗组件当中，让⽗组件的状态来控制这两个组件的重渲染，当我们组件的层次越来越深的时候，状态需要⼀直往下传，⽆ 疑加⼤了我们代码的复杂度，我们需要⼀个状态管理中⼼，来帮我们管理我们状态state。
- 这个时候，redux出现了，我们可以将所有的state交给redux去管理，当我们的某⼀个state 有变化的时候，依赖到这个state的组件就会进⾏⼀次重渲染，这样就解决了我们的我们需 要⼀直把state往下传的问题。redux有action、reducer的概念，action为唯⼀修改state的 来源，reducer为唯⼀确定state如何变化的⼊⼝，这使得redux的数据流⾮常规范，同时也 暴露出了redux代码的复杂，本来那么简单的功能，却需要完成那么多的代码。
- 后来，社区就出现了另外⼀套解决⽅案，也就是mobx，它推崇代码简约易懂，只需要定义⼀个可观测的对象，然后哪个组价使⽤到这个可观测的对象，并且这个对象的数据有更改，那么这个组件就会重渲染，⽽且mobx内部也做好了是否重渲染组件的⽣命周期 shouldUpdateComponent，不建议开发者进⾏更改，这使得我们使⽤mobx开发项⽬的时 候可以简单快速的完成很多功能，连redux的作者也推荐使⽤mobx进⾏项⽬开发。但是， 随着项⽬的不断变⼤，mobx也不断暴露出了它的缺点，就是数据流太随意，出了bug之后 不好追溯数据的流向，这个缺点正好体现出了redux的优点所在，所以针对于⼩项⽬来说， 社区推荐使⽤mobx，对⼤项⽬推荐使⽤redux
好了，基本上就这样了，可以多看看redux哦。
每天一句外语
俄语
Вас благодарю!(感谢您,多亏您!)
瓦斯布拉格大刘——-娃死不能赶大流
一分钟了解react相关推荐
- react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...
- 20分钟理解React Native For Android原理
原址:http://doslin.com/2017/03/15/react-native-source-code-analysis/ 前言 文中所有 RN 缩写指代React Native For A ...
- 10分钟学会React Context API
Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...
- react启动命令_十分钟搭建React开发环境
React是facebook开源的js库,主要用于构建UI,它采用声明式的设计,通过虚拟dom,提高程序执行效率,并且实现了UI的响应式更新,目前react在前端项目中有着广泛的应用,本文主要讲解如何 ...
- 十分钟上手 React+MirrorX，从此前端大神代码不再难懂 | 原力计划
作者 | 杨若瑜 来源 | CSDN博客,责编 | 夕颜 头图 | 付费下载自视觉中国 出品 | CSDN(ID:CSDNnews) 随着React的普及,很多大厂的前端必备React相关知识,甚至已 ...
- 五分钟学习React(四)：什么是JSX
JSX,即javscript XML,是js内定义的一套XML语法.目前是使用babel作为JSX的编译器.这也是在前几期中载入babel的原因. Facebook引入JSX是为了解决前端代码工程复杂 ...
- React Native Fetch封装那点事...
每一门语言都离不开网络请求,有自己的一套Networking Api.React Native使用的是Fetch. 今天我们来谈谈与Fetch相关的一些事情. purpose 通过这篇文章,你将了解到 ...
- 把这304道React的面试题刷完，前端面试没有在怕的！
Core React 什么是 React? React 是一个开源前端 JavaScript 库,用于构建用户界面,尤其是单页应用程序.它用于处理网页和移动应用程序的视图层.React 是由 Face ...
- React Conf 2018 专题 —— React Today and Tomorrow Part II 视频中英双语字幕
距离 React Conf 2018 结束已经将近一个月了,距离上个 React Conf 2018 的中英文双语视频发布也有两周的时间了,这两周,一直在进行Dan Abramov 的关于 React ...
最新文章
- 语义分割DeepLab v2--DeepLab: Semantic Image Segmentation with Deep Convolutional Nets, Atrous Convolut
- Vue 踩坑之旅（1）
- Struts+Spring+Hibernate练习(完整)（1）
- ECS TAG功能详解
- Acdream Path 动态规划
- android 让item满屏,Android的全屏活动？
- robodk导出html错误,在优傲机器人示教器上调试RoboDK机器人程序
- vue+element-ui操作删除（单行和批量删除）
- 如何深入学习python_菜鸟如何学好python
- 全排列及相关扩展算法（四）——原始中介数通过逆推求原排列算法
- 【转载】 Single sign on
- android fragment实例化,Android使得Fragment 切换时不重新实例化
- 我的c++学习(1)hello world!
- PolSARpro v6.0之Sentinel-1A Wishart与SVM监督分类
- python 语音转文字_音频转文字这种刚需，我用python写了个软件，免费不限时
- js html 测反应速度游戏,利用JS测试目标网站的打开响应速度
- 如何获取这台电脑上登陆过的全部QQ号，
- Lucene.net和盘古分词使用小结
- Android Studio 实现桌面小组件（APPWidget）
- 【光学】发散角的奥秘