[day 09] React进阶之路

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 |组件

---

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进行状态管理