这里写目录标题
物美价廉的模板字符串
真的丢人,react渲染函数里写html
<h2>{str1} ,{str2}<h2>
这就是我,空格用 ,这样很不美观,mentor建议我用模板字符串,真的非常好用
首先,知道html里要展示的东西不用打引号,其次,如果是变量,{}括起来,不然怎么区分你是就要打str1还是打str1这个变量
然后,学习模板字符串
模板字符串
箭头函数写组件&类继承写组件
这个真的非常干扰我的工作效率,必须好好学一下分析一下!!!
函数组件&class组件
翻译:函数组件vs class组件,redux作者写的
所以不使用hook的情况下
- 函数组件与class组件的区别?
我觉得是state和生命周期! - constructor是必须的吗?
首先这属于class组件,其次我觉得你需要state时才写他 - 重要!!!
所以如果你希望一个函数刚渲染时执行,就像类组件里的生命周期函数,写在函数组件第一行可以嘛?
当然不可以!!!!
你想达到ComponentWillMount的效果,但实际上函数组件函数体就是类组件render函数的函数体,所以!!!至少在这个项目里,没用Hook,一切需要转向类组件的,特别是生命周期方法,必须改写。
所以我写在函数组件第一行造成错误:每次渲染都向后端要数据,疯狂发request请求。 - 书写规范:如果没有哪些需要,Component should be written as a pure function
代码极度不优雅
我发现review代码我逻辑出的不多,基本通篇格式问题
mentor忍无可忍
推荐我看《代码整洁之道》一篇文档
优化code可以做的事情看文档 ,有时间看书 没时间看整理文档
https://www.zcfy.cc/article/clean-code-javascript-readme-md-at-master-ryanmcdermott-clean-code-javascript-github-2273.html
以后我发4,提交pr之前我一定要把我之前pr mentor提的格式问题通通看一遍,可能真的不整洁。。。
以及这本书最近抽时间看了
论我的代码写的能有多稀碎
const prop = (a < 0) ? { b: false }: { b: true };
改的
const prop = { b: ((a >= 0)) };
undefined
一个object没有一个属性,你试图访问会给你undefined
同时undefined在网页上显示就是空
<h2>{undefined}</h2>
多用js库,lodash,站在巨人的肩膀上
有一个地方需要判断object是否为空,我就很天真的写了js纯代码
当然是被mentor点出来了
用lodash的函数就好,多用库,性能高,调用方便,比起自己写好太多了,特别是在工程中
-判断object ,数组为空肯定不能用toString,返回的结果不对。
用JSON.stringify()才能现原形
还有判断一个数组是否为空如果用长度那么!!!先判断他们是不是数组
关于时间的处理
unix epoch
用的是时间戳,unix epoch。
之所以这样做:因为这个网站有中文版,英文版。对应中国时间,美国时间。所以后端存储,返回时间戳,前端对拿到的时间戳做处理,根据不同时区。
mapStateToProps
看的时候就一直在想,props是组件,state是哪来的?
已知Provider组件<Provider store={store}>
这样使每个组件都可以通过connect和store连接
<Provider store>
使组件层级中的connect()
方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在<Provider>
中才能使用connect()
方法。如果你真的不想把根组件嵌套在<Provider>
中,你可以把store
作为 props 传递到每一个被connect()
包装的组件,但是我们只推荐您在单元测试中对store
进行伪造 (stub) 或者在非完全基于 React 的代码中才这样做。正常情况下,你应该使用<Provider>
。
阮老师的这篇博客反复阅读,收获对redux的深入学习
阮一峰-redux入门教程(三)
import
路径
- 相对路径(相对当前位置开始)
./ 当前…/父亲 - 绝对路径(相对入口文件)
import
- ES6
import xxx from 路径 - CommonJS
const xxx = require(路径)
关于CommonJS
Each child in an array or iterator should have a unique “key” prop.
这个警告,理解react里对数组这样的用key这个props并不能读取到的属性的重要性
stackOverflow上一个对这种警告的回答
react文档关于key prop的重要性
两个旧知识
好用但想不到,还是靠mentor提醒才想起来。
- 数组的map函数操纵数组
- 箭头函数(还是那句话,熟能生巧)
- 事件处理函数+非箭头函数需要bind
- 事件处理函数会绑定触发这个事件的DOM元素,这很多时候不是我们想要的,我们想要的是this指向组件
- 事件处理函数如果是写在类里的箭头函数,为什么不需要绑定?
因为写在类里的箭头函数有独特的找爹技巧,不受事件处理函数绑定的影响 - 如果事件处理函数是写在类里的普通函数,需要绑定
<Button onClick={this.xxx()}></Button>
不行,会迷失这个this。
所以两个解决方法:- 写类内箭头函数,直接调用,不绑定
- 写类内普通函数,绑定,调用
以上都是针对用到this这种情况
不用就很随意了
react的生命周期方法
react的奥妙之一,多理解