react 项目总结

最近公司走了个前端，终于还是让我体验了一波996…真的超级忙~ 哭泣
做的项目也不难，但还是收获很大，记录一波~

1.深拷贝和浅拷贝：拷贝拷贝按字面来说就是复制嘛。不过，深浅之间的差别在于拷贝的第三方数值的改变会不会对原对象产生影响。假设c浅拷贝了a,改变c的值有可能会导致a的值也跟着产生变化，这就是浅拷贝。原因在于浅拷贝的值存放在堆里，地址存放在栈里，变量赋值引用的是变量的值，变量指针（指向存储变量的一块内存）的存储仍然指向的是同一个地方,所以当c发生变化时,可能会导致a引起变化。就像是a,c来自于同一存储内存源，c改变了 a也会发生变化。再来说深拷贝，深拷贝不仅仅拷贝了变量的值，也拷贝了变量的地址。假设内存块存在变量a，b深拷贝了内存a，此时内存块里面会单独拿出一个地方来存储b的值，也就是b单独指向了另一个跟a只是值相同的一个地址内存。当b发生变化的时候，也只是b所指向的内存地址的值发生变化，跟a没有关系（a还是指向原来的内存地址）,简单来说一句话：深拷贝，就是b的值的发生变化不会引起a的值产生变化。

2.关于对象属性值的使用.和[]之间的区别：对象.属性-----没什么好说的，直接获取到对象的属性值。对象[属性值]----区别在于会自动先把属性值转换一波，转换成字符串，然后再去读取属性值。问题还原：

var object= {
通过："pass",
不通过:"Nopass",
}
var isPass = "通过";
console.log(object.isPass)       ---- undefined
console.log(object.通过)          ---- pass
console.log(object[isPass])       --- pass

原因在于对象.的值必须要是个常量，因为对象的属性名，必须是个确定的值。对象.isPass，虽然isPass是字符串，但是他去搜索的是对象有没有isPass这个属性，而不是对象.isPass里面的变量值(例如我这里的“通过“），相当于查找的是object.isPass，所以打印出来是undefined。

3.向后端发起请求，报错404.解决办法：在Pakeage.json里面设置代理proxy,然后发起请求,数据是传给后端了，但是报错502，提示我没有登录，我又把登录的token加在参数里面传过去了，这样就解决问题了。但是我没有想明白为什么要把认证的token传过去，每个接口都要传吗，不应该呀,讲道理难道不是我在登录的时候传一次token就可以了吗…额…等这个项目上线再好好研究一下同源跟设置代理以及token的这些知识。

4.修改前同事的代码，echarts数据可视化…嗯 全部原生js… 三千七百多行…额…一个图表一个echarts option… 同样的四个折线图，就是数据不一样而已 我不知道为什么他要在js里面配置4次相同的options… 发起ajax请求也是原生而且一串串每个接口挨着挨着的复制粘贴了几百行… 反正我是觉得她蛮强的，居然都没有把自己绕进去.记录一下我觉得她代码存在的问题，希望自己以后多注意这些方面：1.缺乏封装思想和对象思想，相同的图表可以封装成一个对象，需要的时候new一个，然后传data进去即可，至于一些颜色什么需要有改动的也可以当做参数传进去。2.js是单线程，从上往下执行，就拿echarts图表的option来说，通篇都是option，后面的变量的确可以覆盖前面的option的值，那如果万一我前面的某个图表后面还要用到呢？再复制粘贴一次？？3.写css样式时，行内样式比较多，修改起来不太方便,能不写行内样式就不写。4.发起ajax请求之后，数据获取到了但是要修改option里面的参数，得把大量的option代码复制到ajax的success方面里面(因为AJAX属于异步请求存在需要用到的数据还没有拿到,所以无法修改option参数的问题)，导致代码太过冗余而且可读性也比较差。5.尽量多写注释，而且最好一个模块之间隔两行，密密麻麻的看起来 的确有点费神。（我都是关键字全局搜索）

5.也是修改前同事代码的时候学到的，一周的数据他弄了七个数组，然后我后面改代码需要拿到七个数组中的数据的最大值。两行代码搞定：

var newArr = [].concat("那七个数组”)
var max = Math.apply(null,newArr);

贴一下代码,红色部分是获取最大值:

暂时就想到这些，后面会续更~
补充：没有要吐槽前同事的意思，记录下来只是为了给自己提个醒，希望能敲出优秀的代码。

下面是另一个项目的后台管理总结"
1.请求后端接口,参数什么都传对了,报错404,接口正确.报错的原因应该是我没有设置代理,本地找不到服务器接口地址,解决办法:找到package.json文件,设置proxy代理:(跟上面一样,这里补充个截图)

以为这样就成功了,结果另一个错来了,用户没有登录.原来是token没有传,在请求参数里加入token字段即可.token是登录时存在cookie里面的,直接取就是了.

2.antd的树形结构没有半选状态,也就是选中了子级之后,他默认给我选中了父级,有个属性是checkStrictly:不再关联父节点选中状态.看似满足我的需求,不需要默认选中父级,但事实是另外的bug是当我回填的时候,没有默认给我选上父级…最后解决办法是在路由配置中重新新建一个字段routerKey,其中包含前面所有父级,本来可以直接使用路由的,但是是半路接手的前同事的项目,他的路由没有包含父级…如下:

通过唯一的key值来拿到父级数据跟自己本身的数据,然后再自己组装成一个数组(一个是包含全部字段的数组,一个是根据树形选择的点击事件来push的选中的数据数组),这样在初次渲染默认数据的时候,就是全部渲染,然后选中回填的时候渲染后一个数组即可…(当时怎么把子级数据跟父级联系起来卡了好久…)