react进阶之路
image
在慕课网上付费买了一门实战课程
觉得讲师在演示的时候并没有:实时的npm start,保持热加载
从而导致不能及时凭借控制台查看报错信息和效果
在好几个章节之后,讲师才统一检查各个js文件的错误
所以在课程评价里打了2颗星,并批评了一番
另外便是redux状态管理如何设计的问题
下图是按照类型,组件来设计
image
但是讲师的设计理念是ducks规范
也就单文件js moudle的方式
在课程的实际中总是从Ui的state来讲解,然后一步步改进
并没有从一开始就进行规范的设计
导致学习的时候只能一步一步跟着,比较累
所以,评价较低,也是因此颇有微词
豆瓣读书:https://book.douban.com/subject/30210697/
读书笔记
image
这本书的作者也是慕课的讲师
因为评分的关系,网站向老师出卖了我的微信号~
匿名评价,且在慕课个人资料里没有填写
只是授权的微信登录
安装node.js
包管理工具:npm /cnpm /yarn
webpack:模块化打包工具
babei 语法编译器
ESlint 语法检查器 ,代码风格规范 Airbnb
使用vscode编辑器,安装还用的拓展插件
chrome调试,与各种Dev-tools,插件
使用脚手架cli搭建工程
终端:mac iterm2 /cmder
reset.css 通过html的link rel引入
外联样式表,可以使用sass loader 或者styled-components , css mould方案解决命令的问题
讲图标作为模块导入 import ,一定要添加alt属性
遍历数组使用map方法,且制定key,尽量不要使用index
react的生命周期,在componentDidMount时发起ajax请求
ref获取DOM,用nativeEvent调用原生事件
this的指向问题,使用箭头函数=> ,或者bind(this)
拷贝:
数组:concat,slice,filter
对象:...扩展运算符 / object.assgin() /
JSON.parse(JSON.stringify(obj))
使用开源库 Immutable.js
引入react-immutable==>[fromJS(),以及 t.oJS()]
前端路由 react-router-dom |<Llink>组件
Redux状态管理
定义action字符串类型
创建action creator [使用thunk中间件,进行异步dispathch()方法]
action必须有type,其他可以自定义结构
定义唯一store数据 [createStore(reducer)]
reducer处理action [使用combineReducers进行拆分合并]
使用react-redux
组织方案: 类型/页面[目录]/Ducks[单文件]
1.用Provider包括index.js的组件,并接受store={store}
2.使用connect(mapStateToProps,mapDispatchToprops)(组件)链接组件
3.mapStateToProps传值 , mapDispatchToprops 定义方法
4.使用各种中间件,aplyMiddleware(thunk)日志,异步等
使用Mobx进行状态管理
网友评论