之前谈到过许多次数据驱动的明白，此次经由过程现实项目磨练了一下本身的主意。
相干文件
项目详设
详设的主要性
关于庞杂一点的项目，做一个细致设想异常主要。有人会迷惑，前端还须要详设吗？
依据我的履历，详设异常主要，异常表现才能。
关于一个新人，详设能够给开辟做一些提早准备。
关于一个熟手，详设能够提早预感一些隐蔽的坑。
关于一个高手，详设须要到达随便给一个有点履历的人，都能直接写代码。
在某种程度上，开辟者详设在全部开辟周期中占得比重越大，才能就越强。
新人能够只占5%，高手肯能占到50%以上（架构完全想清楚了，然后剩下用代码去实践设想）。
react详设的步骤
吃透营业，这个不管用什么选型都很主要
顶层数据结构，model必需梳理清楚，model须要能够完全的掩盖营业
营业React Component中每一个的props，state规划，props，state中每一项的用途，盘算体式格局，与顶层数据结构的映射函数
营业React Component中每一个的Action关于的model转变
model上面增加和后端的关联
基本上上面梳理清楚了，背面就能够直接写代码了。
道和术
网上看到许多解说redux+react的实践思绪，设想模子。觉得都是实践体式格局上面的解说。
比较典范的一张图： 
本日我这边想换一种思绪去诠释他。
数据驱动+react实践的一个条件
置信react的机能！
置信react的机能！
置信react的机能！
快照观点
model才能超等壮大，请记着，每一个model都必需能够对应一种页面状况（能够像恢复快照一样）。model和页面状况存在一种一一对应的关联。
如下图： 
每一个M都和下面的页面对应，用M1能够render出第一个页面，M2能够render第二个页面。
当用户有交互行动时，经由过程action转变M1到M2，这时候人人注重了
慢动作：
用户对M1的页面一做了一个操纵（action）让M1产生了转变M',这时候M1变成了M2,对应的页面也由页面一革新成了M2对应的页面二。同理，M2经由过程交互变成了M3,页面也会革新成M3对应的页面三。
注重我强调了革新两个字。
中心就是页面的行动使得数据转变，数据衬着出数据转变后响应的页面。
这个就是我所明白的数据驱动。
为了到达上面目标，实在我们故意疏忽了机能题目。就是用户每次操纵都邑从新衬着数据，天生对应的新页面。
那末机能题目怎样处置惩罚，这时候react就进场了，机能上，我们须要借助react的假造dom，去比较每一次页面修正的最小diff，然后从新衬着diff部份。所以我上面提到，你须要置信react的机能。
说实话，假如没有这类最小diff的处置惩罚才能，这类完全的数据驱动机能题目异常大。
从上面看，代码实在能够分为两大部份：
render: 依据model写衬着逻辑，这部份就交给react,人人细致看看react的生命周期，都是缭绕render的
change model: 依据用户的action，修正model的数据，这部份交给redux的形式
数据驱动副产物
单元测试
某种程度上，前端是异常难去写单侧的，由于涉及到dom，哪怕是时候许可，单侧的使费用也不是很高。
关于数据驱动这类形式，最少从数据层，能够躲避dom，做一层数据变化的效验（这个和写服务端单侧差不多）。然后有精神和时候，能够加一层model-to-dom逻辑的测试。
用户行动回放
回复上面谁人图片，经由过程model能够纪录一个页面的快照，那末假如关于单个用户，单个终端，根据时候轴纪录一连串的model，我们就能够回放用户的操纵行动。
以及应用大数据去批量剖析用户行动数据。
数据驱动的思索
这类形式某种程度上，是为了进步开辟效力，削减页面的庞杂度（参考《前端数据驱动的代价》），削减开辟的庞杂度。
想一想5-6年前，照样多页面时期，每一个模块都是一个页面，数据都由后端去套模板。然后用户每一个操纵基本上都邑触发一些革新。数据驱动和有点相似，只是借用react在单页面上完成了。前端也负担了更多的数据处置惩罚工作。
博客地址
http://tangguangyao.github.io/
微信民众号
