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

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

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

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

原文地址:https://www.cnblogs.com/suihang/p/11456247.html

时间: 2024-10-08 06:39:10

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

2019/09/02最新进展

今天完成的工作如下: 1.把我演算的安全距离模型草稿整理了. 2.这个公式不用手算,写一个test.cpp可以输入变量,算出结果.很简单低级的程序.代码上传到gitlab了. 3.重新打开我暑假用matlab测试的程序,把我最新的数据和理论值写进程序.结果出bug了.正在修改bug. 4.和孙磊同学交接这几天的工作. 明日计划: 1.重新学习BP神经网络的基本知识,把matlab出现的bug修改了,测试我的新数据. 2.加入更多数据进行测试. 3.想想怎么把能见度换算成数据指标. 心得体会: 1

React Native升级指南|v0.40+升级适配经验与心得

尊重版权,未经授权不得转载 本文出自:http://blog.csdn.net/fengyuzhengfan/article/details/54585899 React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本发布.随着一次次版本的迭代,React Native也逐渐稳定,版本发布频率保持在了每一到两周一次.新版本不停的迭代对于React Native开发者来说,及时升级React Na

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

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 511

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

并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScript,顾名思义该方法是项目使用typescript时的配置 方法二.使用babel-preset-mobx, 安装并添加到.babelrc配置中,该方法需要升级一些依赖, babel-core -> @/babel-core 7.x babel-loader -> @/babel-loader 8.

搭建React项目环境

1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查看npm版本号:npm -v 4.再次输入npm可以看到下面有哪些包 5.下一个全局安装react -app :install create-react-app yarn -g 6. 下面在webstrom工具中创建React项目引用React所需要的依赖 7.项目构架: 启动项目进行访问:npm 

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

react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况. 从webpack开始 思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的

webpack搭建react项目

遥看套路挖掘机,不见当年老司机.this is a boilerplate 1.新建一个项目目录文件夹,暂且叫seed cd seed npm init 然后一直回车,最后yes,最终生成一个package.json文件 2.新建以下 src  文件夹用于存放js,css,img等源码和引用的静态文件 .babelrc babel编译器配置文件 favicon.ico   浏览器默认读取的一个icon index.html  入口首页 webpack.config.js  webpack配置文件

将arcEngine9.3和dev9.2.4开发的项目升级成arcObject10.2和dev15.1.3过程中遇到的问题和解决

好久没碰.net了,arcgis更是感觉都忘干净了,今天将arcEngine9.3和dev9.2.4开发的一个项目升级成arcObject10.2和dev15.1.3过程中遇到了一系问题,留个笔记,留个回忆: 一,双击打开项目: 这个时候发现,一直在upgrade和ok这两步循环,上面的英文描述原因已经说得很明白了,就是需要.NET framework4.0+以上的版本,而这个项目我看了一下.NET framework3.5版本是3.5 换成4.0以上就行,如下图: 然后再回到upgrade界面

MyBatis的项目升级

第二节 MyBatis的项目升级 2016年3月2日 星期三 09:13 1.namespace命名空间 针对于SQLID的方式: 持久化类的全路径,例如 com.shxt.model.User 针对于接口的方式: 取的是针对于数据库操作的定义接口的那个全路径: com.shxt.mapper[dao].UserMapper 2.日志文件的配置 使用的是log4j.properties 针对于日志文件有一个级别: TRACE DEBUG INFO WARNING ERROR 扩展作业:如果使用J