一名大专程序员的前端转型之路( 五 ) 作者|张旭乾责编|梦依丹出品

这个项目的后端比较特殊，一位大佬同事搭建了GraphQL服务，之前在留学的时候就已经听同学提到过很多遍了，现在有机会体验体验了。在看GraphQL官方文档学习、以及使用搜素引擎搜索的时候发现，使用GraphQL后可以不用Redux ，于是这个项目我只用了React?ReactRouter和Apollo-GraphQL这几个主要的库。
这套技术加上Reacthooks ，让我真正感受到了前端开发的乐趣。组件从类的形式转换成了函数形式，代码量减少了很多，公共的逻辑也能抽离成Hooks ，在各个组件使用，组件自身的逻辑也能抽离成hooks ，来让功能和UI展示代码分开，让代码更易读。这样，整体的开发效率提高了不少。
UI方面则尝试了AntDesign ，因为纯后台的，没有设计稿，只有产品原型。
另外这个项目是基于Create-React-App脚手架创建，了解到脚手架提供的功能非常全面，像静态资源（图片、字体）管理、插件、打包构建等都包括了，省了很多手工配置。
精进前端技术期第3个项目，是一个从0开始、面向客户的应用， UI是由设计师专门设计，有很多自定义的样式。这是我积累最多前端开发经验的项目，从技术选型，到组件规划，再到代码复用，对前端开发的架构有了全新的认识。
样式管理为了研究怎么在React项目中管理样式最方便，我开始研究大型项目中的CSS样式管理，了解到有普通CSS和CSS-in-JS两种方案之后，再查资料发现CSS-in-JS方案更灵活，能够在CSS里访问JS变量，让组件样式可以随着组件状态的变化而变化。
决定用CSS-in-JS方案之后，我找到了GitHubStar数比较高的styled-components库，它支持CSS嵌套、主题等功能，并且能够访问组件的属性，而且它定义的样式，本身也是一个React组件，可以直接在JSX中使用。
UI库继续使用了AntDesign ，不过也就是利用一下它的组件功能逻辑，样式几乎全部都修改了。
全局状态的取舍项目后端这次没有用GraphQL ，我又发现不用GraphQL也没必要使用Redux ，所以就没有再添加Redux ，结果也证明我的选择是对的：项目本身没太多全局状态，舍弃Redux大概让开发效率提升了1倍，之前像表单这样的组件大概需要一天才能完成，现在只需要半天。不过项目里有个内嵌的聊天系统，需要用一点全局状态，我就从网上查找了一些解决方案，发现使用ReactContext+useReducerHooks的方式实现全局状态管理就够了。
提升学习能力这个项目使用的新框架都是一边看官方文档一边学习的，有不好解决的问题，就结合搜索引擎和GitHubIssues解决。
改良前端项目结构对于项目的结构，这次使用了就近原则来组织代码，每个组件放到单独的文件夹中，组件相关的styles、图片、hooks等都放在同一个文件夹，对于公用的部分，则放到项目顶级的 src目录下。 API和其它库的配置项也都放到单独的文件夹里，同样遵循就近原则，这样管理项目就方便多了。
锻炼沟通能力这个项目的图表也比较多，为了和App端保持一致，选择了Echarts 。在使用Echarts的时候，虽然能够实现大部分设计稿中的样式，但是还是有小部分不能精准还原，在拿着实际效果跟设计师沟通之后，有些样式就做了些调整，或直接舍弃了。
项目最后验收的时候，还需要跟UI设计师核对样式，这期间我和设计师找了单独的工位，每天都是在沟通哪里的设计需要修改，哪里的设计不好实现，怎样取一个大家都满意的折中方案。这些在了解设计基础原则之后，你也会明白设计师设计的意图和用意，这样用理解的心态来沟通，再辅以技术上的难度展示和时间需求，就能够更好的避免不必要的UI改动和代码重构。