我们都知道react的组件化会把dom元素拆分的很散，有父组件和子组件之分，因此原有的html结构分在很多js文件中，而前端特效操作html dom的方式就要发生一些变化，有的需要从父组件传参到子组件，有的子组件操作需要找父组件代理操作，虽然react有很棒的生命周期，帮我们控制着逻辑和状态的变化，但代码积累多了，却发现，随着子组件分布多，逻辑被也被拆分了，如果这样写下去，后期会维护很不方便，在做前端ui的时候也会引用第三方库辅助做特效，比如Swiper.js,wow.js,jquery.lazyload.js… 等等，这些元素掺和在一起，但我认为逻辑不集中，会造成代码维护成本加大，如果是一个react新手看了会直接崩溃。
所以我想和大家讨论下，react方式的前端ui体系如何构建的思路清晰，代码结构清晰，维护方便呢？怎么打造一个好的react UI生态圈呢？
React前端特效编程方案如何规划？
stars
#1
1 Like
leozdgao
#2
分享下自己的实践吧，我写的是React+Redux的SPA项目，另外这是个个人项目，没有强大的团队支撑。task-box（请无视README.md，项目还没有完成）
这是我的目录结构，在src目录下核心的3个目录：
- containers：主要承载页面整体布局和逻辑的组件，通常也被叫做smart component
- components：仅负责接受props并render的组件，通常也被叫做dump component，不过也会带有一些和app state无关的内部状态
- redux：放redux模块的，应用了ducks-modular-redux的规则
项目中的所有Form和Modal我都分别整理在同一个目录的，放在components目录里。
当然还会有一个定义routes的和utils的目录，就不列出了。
针对你说的：
react的组件化会把dom元素拆分的很散，有父组件和子组件之分，因此原有的html结构分在很多js文件中，而前端特效操作html dom的方式就要发生一些变化，有的需要从父组件传参到子组件，有的子组件操作需要找父组件代理操作，虽然react有很棒的生命周期，帮我们控制着逻辑和状态的变化，但代码积累多了，却发现，随着子组件分布多，逻辑被也被拆分了。
如果是比较大型的项目建议使用Flux或者Redux，将App state剥离出来单独管理，React作为view层负责根据app state进行render并响应用户操作（dispatch action）。
在做前端ui的时候也会引用第三方库辅助做特效，比如Swiper.js,wow.js,jquery.lazyload.js… 等等，这些元素掺和在一起，但我认为逻辑不集中，会造成代码维护成本加大，如果是一个react新手看了会直接崩溃。
额…比如echart吧，一个饼图，就先封装一个Chart的component然后传一个datasource给它render。至于第三方库，我最近正好写了个HOC，lazy load 第三方库，react-script-loader，可以了解下。
欢迎继续交流。