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

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

    D. Equalize Them All You are given an array aa consisting of nn integers. You can perform the follow ...

  2. 【iOS】Masonry 自动布局 MASViewConstraint.m:207 错误

    问题详情: Assertion failure 报错原因: make.right.equalTo([_imageView superview]).right.with.offset(-); make. ...

  3. java中map,set的简单使用

    package test2; import java.util.*; import static java.lang.System.out; public class test2 extends St ...

  4. 史上最全存储引擎、索引使用及SQL优化的实践

    史上最全存储引擎.索引使用及SQL优化的实践 1 MySQL的体系结构概述 2. 存储引擎 2.1 存储引擎概述 2.2 各种存储引擎特性 2.2.1 InnoDB 2.2.2 MyISAM 3. 优 ...

  5. 配置多个JDK存在的问题与解决方案 (亲测可用)

    安装多个JDK时的技巧 (亲测可用) 我的电脑本来是JDK8的,后来的想在不同的JDK版本下测试JDK的垃圾回收器. 一开始的的思路是,先安装JDK,为每个JDK配置自己的家目录,然后在想用哪个版本的 ...

  6. JS 自执行函数

    由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧. js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: fu ...

  7. Oracle_InstantClient 及PL/SQL Developer工具的安装

    一.下载 InstantClient 地址: http://www.oracle.com/technology/software/tech/oci/instantclient/index.html i ...

  8. ext container的使用的场景

    container 是 panel 简化,他称之为容器,而panel则是面板. 如果不需要类似Ext.panel.Panel,Ext.window.Window和Ext.tab.Panel 等功能,则 ...

  9. Docker启用TLS进行安全配置

    之前开启了docker的2375 Remote API,接到公司安全部门的要求,需要启用授权,翻了下官方文档 Protect the Docker daemon socket 启用TLS 在docke ...

  10. java并发编程(七)----(JUC)ReadWriteLock

    前面我们已经分析过JUC包里面的Lock锁,ReentrantLock锁和semaphore信号量机制.Lock锁实现了比synchronized更灵活的锁机制,Reentrantlock是Lock的 ...