React项目升级遇到的问题复盘(2019-09-02)

Posted 2020-11-12 一只菜鸟攻城狮啊

老铁们，发没发现我换了个贼帅的头像，高端大气上档次，非洲大地我最凶！可把我自己牛逼坏了。

不扯啦不扯啦，抓紧进入今天的正题，从今天开始我会每天写一下每天工作的出现的问题，主要对这些问题出现的原因，以及对这些问题是怎么思考的，怎么在后续的工作中避免出现类似的问题，我的宗旨是在哪里跌倒就在哪里躺好，今天的主要问题还是来自于React项目的升级，我们一起来看一下，填填坑

问题：

　　 1.React中父组件传递的函数和从redux中取到的函数的命名问题

　　   2.React中获取数据的异步请求该注意的地方

　　   3.对React版本进行降级导致的React.createContext()抛错问题

　　
问题一的原因与思考：React中父组件传递的函数和从redux中取到的函数的命名问题

　　　　情景：将React中父组件传递过来的函数名和从redux中拿到的函数名写了相同的名字，导致了一系列的问题

　　　　思考：由于命名混淆，导致后续别的同学维护项目时需要花费大量的时间来看代码·熟悉代码，相似的命名容易对维护同学的思路造成影响

　　　　方案：可以将两者区分开来，比如父组件传递函数的时候给函数加一个_或者一个特殊的前缀，这样保证在以后项目被升级时，升级的同学可以迅速的找到对应的函数，以提高升级的效率

 

问题二的原因和思考： React中获取数据的异步请求该注意的地方

　　　　情景：B页面发送添加条目请求后通过跳转路由的方式跳转到了A页面（A页面显示所有条目），结果添加请求发送后，跳转到A页面A页面并没有实时的将刚添加的条目显示出来

　　　　思考：1.当看到这种情况出现我首先怀疑的是组件应该是接受到了新的数据未发生更新，

　　　　　　　　采取方案：保证返回新stroe，结果：失败

　　　　　　　2.后发现请求接口是304，遂怀疑是接口一直没有拿到更新后的接口数据，

　　　　　　　　采取方案：接口附加时间戳，结果： 发现拿到的数据依旧是更新前的

　　　　　　　3.采取方案：将跳转的方法延迟了两秒，结果：A页面正常

　　　　　　　4.发现是由于B调用添加条目请求后直接跳转到了A页面，A页面获取所有条目的接口立即执行返回数据，而此时添加条目还并未进入所有条目当中 

　　　　　　　　采取方案：将跳转方法扔到添加条目的回调中去，将并联执行的两个操作变为串联执行，即将异步变为同步  结果：A页面正常

 

问题三的原因和思考：对React版本进行降级导致的React.createContext()抛错问题

　　　　　　　情景：由于误操作将React16.9.0版本替换为了React16.0.0，导致原本可以正常执行的项目抛错：React.createContext() is not a function

　　　　　　　思考:查看后发现在React16.0.0中根本不存在这个方法，后经过查找发现，React.createContext()是在16.3.0版本之后才被加入进来的

　　　　　　　方案：选择合适的Raect版本即可

 

此为每日复盘系列的第一篇，希望能一直坚持下去，实现自己的梦想