
项目名称：本地管理平台（ESS）

开发框架：React.js+AntDesign

开发语言：JavaScript

担任角色：独立负责前端

开发时间：2019.04—2019.12
一、
一、项目背景：
新能源储能产品为每个电站服务，用户可以通过储能云平台了解到储能电站的信息。本地管理平台
（ESS）能及时发现本地的告警和保护事件，无法对储能电站进行运行情况的预测，分析和事件追朔。
二、
二、实现细节：
后台：
1.
Netty作为网络框架，创建TCP和UDP服务，创建线程池处理并发问题
2.
对不同协议情况选择TCP或者UDP服务，根据国家电网和南方电网相关协议，进行组帧和解帧
3.
将解好的报文，通过Hibernate放入mysql，出数据库通过DAO的方式给前端提供服务
前端：
1.
Html样式和CSS结构布局创建一个整体BFC，采用双飞翼布局骨架
1.
使用react-router-dom中的BrowserRouter和Route配置相应的路由
2.
状态管理使用适当的redux，解决react组件间通信和组件间状态共享问题
3.
使用axios异步请求，setTimeout和setInterval组合形式请求后台数据
4.
将WebPack作为打包工具，处理好loader和label，build整个工程进行发布
三、性能优化：
后台：
1.
使用mysq+redis或mysq+MonogoDB组合可以缓解数据入库的堵塞和前端请求数据较慢的情况
2.
进一步优化数据库设计，按设备号细分表格区，使用一对多Entity形式，据不同业务进行数据库访问
前端：
1.
类组件中绑定this或类中使用箭头函数，避免在嵌套组件中绑定bind,否则每次render执行该函数
2.
浅比较时，使用React.PureComponent代替自己在shouldComponentUpdate书写比较
3.
属性值量大需要比较，使用seamless-immutable（Immutable大）管理数据，持久化数据结构
4.
组件属性传参尽可能减少参数数量，嵌套组件中设置的key和value应当在render（return外）里面
定义好，避免每次render一次创建一个新的对象。