react 数据管理之state思想指南

Posted 2020-09-22 jake-前端工程师

react的数据管理库有不少，最常听到的可能是mobx redux altjs之类的，当然还有很多其他，可以自己搜索。

为什么需要数据管理库呢，因为react本身只是为了实现view的表现，而不是数据的管理。

而数据类库就是为了实现react的不能之数据管理。也就是model层的分区管理。这个model层你可以实现对后台数据的引入和输送到view层的展示，还有可以依靠数据的改变触发view层的展现的改变，从而实现前端视觉状态的改变和复杂展示、动态展示等，所以我们需要有一个数据类库如mobx来帮我们管理react下前端的数据管理，实现分别出来model层。

只要model层的数据改变，也就是我们在model层操作数据，如果这个数据关系到view层的展示，那么react view就会实现视觉状态的改变，从而实现动态性功能性的前端视觉展示，和我们之前用的jq有很大的不同，对前端的视觉改变不在是依靠dom的操作插入删除等操作，而是依靠对数据的管理来改变前端视觉的展示。数据的改变数据类库就会自动触发react view的视觉改变，这个我们前端的视觉展示操作改变的思想就是对数据的操作的改变。而react是专注view层的一个库，这个库有非常好的前端视觉改变操作性能，依靠其优秀的算法来实现视觉层的改变。这个良好的view视觉改变性能是react得到推崇的原因，其优越的视觉改变速度是原来dom操作无法实现的速度，至于react具体是怎么实现这么好的性能来改变前端视觉展示，我们不得而知，这个fc的研究成果，有强大研究动力的人可以自己去研究一下其内核和算法。

基本上现在的许多前端框架都是已经和原来的jq之类的直接操作dom的前端框架有很大的区别了，现在主要流行的且是大趋势的方法就是操作数据也就是变量的改变来达到控制view层的视觉展示改变。所以要有良好的前端能力需要对此有所深入掌握，也就是model层是数据池，这个数据池的内部变量的改变可以实现view的展现的改变。现在我们需要的能力的基本是能够搭建好view层和model层的桥梁，搭建好基本桥梁后，model层数据的改变能够符合逻辑思路和预期的视觉改变，搭建好基本的model与view的连接桥梁后，我们想要控制view层的改变主要是通过在model层改变数据操作数据来达到被改变后的数据自动触发view层视觉展示的改变。从而实现前端的一系列目的性的实现---前端动态界面的正确展现。

不管多复杂的数据操作，以react这个拥有优越性能的前端视觉展现能力的前端框架，我们就可以实现良好的视觉改变于人类肉眼所不能轻易所觉察出来的间隔展现切换，model里的数据改变快速触发了view 快速的视觉展现的切换，实现良好的前端界面动态控制，且能够有良好的性能体验，视觉改变的性能能达到用户预期的心理接受度。另外react框架主要流行的是单页应用的制作，而单页应用虽然初期加载量相对比较大，但是加载成功基本的js包后就可以实现拥有比原来dom操作更好的界面性能的体验，总体而言react的单页应用优势和优秀的view界面性能，可以实现良好的应用体验。