工作思路整理

物美价廉的模板字符串

真的丢人,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的奥妙之一,多理解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值