开始了第一份前端工作

开始了第一份前端工作，这个周一入职的。入职后接收到的第一个事情是将一个之前由layui和jQuery写成的老项目用antd pro框架重写。第一步安排的任务是将登录逻辑实现，昨天晚上已经完成了。第二部是完成里面一个界面，还在进行中。登陆时有个输入验证码步骤，有一个需要是请求后端接口，返回验证码图片的src赋给创建的img元素，以及返回对应的正确值通过localstorage保存下来。

遇到的问题除了经验少写项目比较慢之外，还有就是后端接口文档错误比较多，不完整。需要查看原项目实际的发送请求，照着浏览器network中的请求来写，有些费力。

这三天上班时大部分的时间都是在看文档学习。antd pro框架是基于react，umi，dva实现的；dva又是用到了redux-saga等内容。里面大多数内容之前都是没有怎么了解过。这三天看了一点layui（因为需要了解一点来看懂之前的项目代码），看了saga，看了react hooks（之前没有用过这部分内容），看了dva的model的用法，也花了不少时间了解antd pro所使用的与umi类似的文件结构，理解文件是怎么组织到一起的，相互之间的关联。

总结下这三天所了解的内容（都是自己的一些理解，不一定很准确）。

antd pro的文件结构包括用来配置路由，网站构建等内容的config；模拟数据的mock；创建网站主体的src。src下又有管理业务页面的pages，抽出来的通用组件components，管理状态的models，后台接口的services。而pages下面的每个page又有自己的model，service等文件。

管理状态的store由多个model部分组成，每个model有各自名字在namespace对应的值中，还有初始状态state，处理同步action的reducer，处理异步action的effect。store通过connect函数与组件链接。

effect使用的是generator函数，通过yield执行每一步，常用的有call方法和put方法，call方法执行异步函数，put方法发送action。

文件代码中经常用到react的函数组件，以及react hooks。react hooks是用来在函数组件中实现类似class组件中state和生命周期等功能的。最常用的有usestate和useeffect。usestate实现state功能，useeffect实现类似在componentdidmount，componentdidupdate等生命周期绑定方法的功能。