持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
此次react学习路线
react全家桶：
jsx的初识、虚拟dom、函数组件、类组件、this问题、setState问题、form表单受控问题、ref/createRef问题、context上下文、及扩展内容。
参照官网：👉react中文官网
react redux：因为组件之间传值麻烦，且涉及到异步问题请求问题(react-thunk的问题)
整合时就使用react-redux，路由时使用react-router-dom。使用的脚手架create-react-app。
后端：
关于项目后端：node,express后端核心框架，sequelize(orm数据连接数据库) mysql
-
使用模块化开发.....将服务、数据库、路由等拆分成模块后又合并在一起。
-
数据库模型搭建 model/模型之间的关系（例如：一对一、多对多）
-
分层架构：控制器层controller， app拦截到router层-中间件middleware层-controller层-model层-sequelize层-mysql层
-
接口api方面：
登录注册api的实现jwt
token鉴权：token生成与解签
密码md5加密
传统接口：关注作者/创建文章....使用 include标签关联查询
-
restful api：撰写接口文档，并利用软件postman测试
-
创建项目：create-react-app
-
架构：pages各种页面-component公共抽离组件-store(reducer模块化)存储数据-router路由-request封装网络请求-utils
-
技术难点：暂时不知道哪里算是技术难点
前端：
先通过脚手架自动创建的文件下public下文件index.html找到app根组件，从app-page（各种也米娜）-component（各种组件）- react - redux(获取数据，发送数据)-action（工厂函数发送指令）- 利用redux-thunk网络请求 -request方法 - 设置请求业务模块（url与body）-apiClient请求工具封装（token问题）- 数据同步
难点：
redux+react-router借助connect-react-router插件可以在redux中使用路由push跳转...
token问题：怎么一直维护用户状态，一次登录后下次直接进首页（token与user信息同步到本地localstorage）
维护登录状态：currentUser，token存放在localStorage
页面跳转：需要重定向，监听时机
数据缓存问题（共用仓库导致的数据可能混乱）比如用户注册，登录用的都是同一个仓库中的数据，怕发生混乱，所以在跳转之后要onload卸载-清除缓存componentWillUnload钩子函数中
路由守护：只有登录才能访问后面的页面---------高阶组件实现
单独分装出来的功能Auth----从props中获取children和currentUser，判断currentUser是否存在，从而对子组件进行保护。登录----return children。未登录redirect重定向
把所有需要保护的页面使用这个Auth高阶组件全部被包裹起来。 性能优化：
懒加载的实现方案，生成一个大bundle.js。优化成为当需要这个路由时才去加载这个页面的bundle。使用lazy包裹组件实现动态加载
拒绝数据无效更新：memo,pureComponent/sholdComponent优化。
suspense异步加载资源，显示友好信息，fallback={h2}
业务方面：
创建文章时书写的文档内容如何进行markdown解析，解析成为html的样子
markdown解析原理：
1. 预处理，将字节数组后添加\n换行
2. 寻找block，例如heading标题、paragraph段落、code代码块、table表格
3. 进一步寻找inline，例如text文本、link标签、image图片、加粗文字...
将inline使用parse方法转化成tokens数组。
tokens数组格式如下：
heading_open 例如<h1>
inline
heading_close 例如</h1>
4. 如果内容中存在点击跳转的链接需要被识别为链接而非字符串，方法linkify。
5. 使用render方法遍历tokens数组，将每一组标签合并转化成html格式
分页；（非必要不提）
设置文章标签（按一次回车就可以进行标签提交）；
删除标签-使用标签filter过滤完成删除。
项目就到这里了，复习的时候只需要看看自己之前写的技术文章，就会恢复技术记忆哈哈哈哈哈哈哈，接下来接着学习hooks。hooks见。
