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

不扯啦不扯啦,抓紧进入今天的正题,从今天开始我会每天写一下每天工作的出现的问题,主要对这些问题出现的原因,以及对这些问题是怎么思考的,怎么在后续的工作中避免出现类似的问题,我的宗旨是在哪里跌倒就在哪里躺好,今天的主要问题还是来自于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版本即可

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

React项目升级遇到的问题复盘(2019-09-02)的更多相关文章

  1. React Native升级方法——升级到最新版本0.59

    React Native最近有大动作,于2019年3月12日发布新版本0.59.主要有两点值得升级:支持React Hooks:升级了JavaScriptCore,使Android性能有大幅提升.据用 ...

  2. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  3. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  4. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  5. 【react npm】解决用npmstart启动别人的react项目的问题1:sha1-xxx checksum failed wanted sha1-xxx but got sha512-xxx. (10700 bytes)

    1.npm是nodejs的包管理器,相当于php的composer,python的pip,用于安装各种包. 2.一般来说,别人拷给你的react项目不会带依赖包的,因为太大了,需要用npm命令自己安装 ...

  6. React 项目引入 Dva

    背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...

  7. (转)react 项目构建

    原文:https://segmentfault.com/a/1190000016342792 写在前面 每次构建react项目的时候都会配置一大堆东西,时间久了就会忘记怎么配置.为了方便自己记忆也为了 ...

  8. 搭建React项目环境【1】

    1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查 ...

  9. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

随机推荐

  1. HTTP 400 Bad request 原因

    我在使用httpclient 发送http请求时遇到问题,请求报 400 Bad request.网上都在说下面这两个原因 400 是 HTTP 的状态码,主要有两种形式: 1.bad request ...

  2. IO流总结2

    2.字节流 |-- InputStream(读) |-- OutputStream(写) 由于字节是二进制数据,所以字节流可以操作任何类型的数据,值得注意的是字符流使用的是字符数组char[]而字节流 ...

  3. java中代码的注释和快捷

    添加必要的注释,对一个有责任心.有道德模范的前端必须具备的好习惯, 可以大大提高代码的可维护性.可读性. java代码注释快捷键:ctrl+shift+/首先熟悉一下html.css.js的注释的写法 ...

  4. Golang高效实践之泛谈篇

    前言 我博客之前的Golang高效实践系列博客中已经系统的介绍了Golang的一些高效实践建议,例如: <Golang高效实践之interface.reflection.json实践>&l ...

  5. Nginx安装(详细版本)

    Nginx安装文档 前言: 最近,系统部署人员那边,让我们给写一个傻瓜式的Nginx安装过程.所以就有了这个文档,本着独乐乐不如众乐乐,就分享一下.我觉得对入门小白来说,有图,乃至运行过程图,是很重要 ...

  6. 【原创】TextCNN原理详解(一)

    ​ 最近一直在研究textCNN算法,准备写一个系列,每周更新一篇,大致包括以下内容: TextCNN基本原理和优劣势 TextCNN代码详解(附Github链接) TextCNN模型实践迭代经验总结 ...

  7. 使用抽象工厂反射获取不到Dal层对象,未能加载文件或程序集......

    Put aside the fog and see the essence 解决问题之前,要明白问题为什么会出现 我相信能点开这篇帖子的人,都是具有探索精神的人,因为,只有心存疑问才会搜索 如果只想单 ...

  8. node命令行工具之实现项目工程自动初始化的标准流程

    一.目的 传统的前端项目初始流程一般是这样: 可以看出,传统的初始化步骤,花费的时间并不少.而且,人工操作的情况下,总有改漏的情况出现.这个缺点有时很致命. 甚至有马大哈,没有更新项目仓库地址,导致提 ...

  9. JVM运行时数据区--深入理解Java虚拟机 读后感

    程序计数器 程序计数器是线程私有的区域,很好理解嘛~,每个线程当然得有个计数器记录当前执行到那个指令.占用的内存空间小,可以把它看成是当前线程所执行的字节码的行号指示器.如果线程在执行Java方法,这 ...

  10. 利用DoHome APP和音箱控制小车的实验参考步骤

    准备材料: Arduino Uno 一块 Arduino 扩展板        购买链接 DT-06模块一个       购买链接 安卓手机一个 小度音箱一个 小车一个 杜邦线若干 1.DT-06固件 ...