工作思路整理

物美价廉的模板字符串

真的丢人，react渲染函数里写html

<h2>{str1}&nbsp,{str2}<h2>

这就是我，空格用&nbsp，这样很不美观，mentor建议我用模板字符串，真的非常好用
首先，知道html里要展示的东西不用打引号，其次，如果是变量，{}括起来，不然怎么区分你是就要打str1还是打str1这个变量

然后，学习模板字符串
模板字符串

箭头函数写组件&类继承写组件

这个真的非常干扰我的工作效率，必须好好学一下分析一下！！！
函数组件&class组件
翻译：函数组件vs class组件，redux作者写的
所以不使用hook的情况下

1. 函数组件与class组件的区别？
   我觉得是state和生命周期！
2. constructor是必须的吗？
   首先这属于class组件，其次我觉得你需要state时才写他
3. 重要！！！
   所以如果你希望一个函数刚渲染时执行，就像类组件里的生命周期函数，写在函数组件第一行可以嘛？
   当然不可以！！！！
   你想达到ComponentWillMount的效果，但实际上函数组件函数体就是类组件render函数的函数体，所以！！！至少在这个项目里，没用Hook，一切需要转向类组件的，特别是生命周期方法，必须改写。
   所以我写在函数组件第一行造成错误：每次渲染都向后端要数据，疯狂发request请求。
4. 书写规范：如果没有哪些需要，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

路径

1. 相对路径（相对当前位置开始）
   ./ 当前…/父亲
2. 绝对路径（相对入口文件）

import

1. ES6
   import xxx from 路径
2. 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的奥妙之一，多理解