随笔分类 - react
摘要：概述 switch语句对一个表达式求值，将结果与 case 子语句比较，如果匹配，则从 case 处的语句向下执行。 语法 break;语句是可选择的，如果遇到break;则会跳出整个switch语句。如果没有任何case匹配，则进入到default:的分支。default:分支也是可选的。 swi
阅读全文
摘要：今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。 ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。 1.通配符传参 Route定义方式： <Route path='/path/:
阅读全文
摘要：在react中，带有html格式的内容，会保留原有的标签样式，并不能正确展示。效果相当于Vue中的v-html // 2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对; <div dangerouslySetInnerHTML
阅读全文
摘要：SPA单页应用的2种类型分页技术，常见于React、Vue等基于组件化开发的项目 1、纯前端分页 2、基于后台的分页 （1）纯前端分页 1、请求获取数据：一次性获取所有数据，翻页时不再发送请求 2、请求接口：不需要指定页面（pageNum）和每页数量（pageSize） 3、响应数据：所有数据的数组
阅读全文
摘要：reactjs是一枚新进小鲜肉，跟gulp搭配流行一段时间了。工作或者面试中经常遇到这样的问题，“子组件如何向父组件传值？”。其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父
阅读全文
摘要：react如果直接在点击事件里传参，则不会在触发点击时进行触发，而是在渲染时直接调用 1、直接传参 如下所示 测试后发现，该事件会在初始化时直接触发，而不是点击时触发。解决该问题方案为：箭头函数+间接调用 2、箭头函数+间接调用 此时便是在点击时触发函数调用 3、小结
阅读全文
摘要：一般对于本地初始化的项目，除了使用Mock进行模拟外，我们还可以本地搭建后台和数据库，然后结合API文档向数据库添加数据，如下所示 1、查看API文档添加请求 2、使用postman发送请求 3、接下来可以进行检查 1、直接在CMD链接数据库查询 2、使用查询API进行测试 3、使用数据库可视化工具
阅读全文
摘要：最近一直在做react项目，发现一个bug，困扰了我两天。 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your ap
阅读全文
摘要：这里分享个常见的测试调试方案，相对于常用的console.log()提升了一些档次... ... 如图所示我们在react项目组件正式render之前，加了个debugger断点 接下来刷新页面如下 我们可以点击下一步继续往下执行代码 我们会看到，当执行玩openKeyPath赋值后，再往下执行时，
阅读全文
摘要：<Route exact path="/Home" component={Home}/> 1.路由组件：只有包裹在Route组件里的才能使用`this.props.location`， 2.非路由组件：假如有个需求，是面包屑或者导航组件里需要拿到`this.props.location`（导航组件或
阅读全文
摘要：个人理解： <Route exact path="/Home" component={Home}/> 1.路由组件：只有包裹在Route组件里的才能使用`this.props.location`， 2.非路由组件：假如有个需求，是面包屑或者导航组件里需要拿到`this.props.location`
阅读全文
摘要：案例结合递归+遍历实现二级导航 import React from 'react' import { Menu, Icon } from 'antd'; import './index.less'; import MenuConfig from './../../config/menuconfig'
阅读全文
摘要：先使用withRouter对组件进行装饰然后就可以使用this.props.location.pathname获取到了例如： import React from 'react'; import { withRouter } from 'react-router-dom'; @withRouter e
阅读全文
摘要：作用： 默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push('/detail')跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给
阅读全文
摘要：先回顾下之前所做的操作，在用户登录成功后将用户信息存储在内存里，如下所示 1、编写用户存储信息模块memoryUtils.js 2、登录组件里，当登录成功时将信息存储到内存 3、后台主页里进行登录验证 判断内存里是否包含user用户信息，如果没有则表示没有登录，重定向到登录页；否则正常访问 但此时发
阅读全文
摘要：（1）跨域情况： 跨域情况： 1）、协议不同：http与https 2）、主机不同 3）、端口号不同 （2）跨域处理： 跨域处理： 1、JSONP处理跨域，缺点：只能处理GET请求 2、CORS后台处理（开发应用比较少） 3、服务代理（开发应用较为广泛） （3）代理服务器： 代理服务器会帮我们做一个
阅读全文
摘要：文件--首选项--设置--用户设置 在用户设置添加 "emmet.includeLanguages": { "javascript": "javascriptreact" }如果你是mac用户，code--首选项--设置，进入后和window不太一样，mac展示的是一个列表
阅读全文
摘要：在一个Node.js项目中，package.json几乎是一个必须的文件，它的主要作用就是管理项目中所使用到的外部依赖包，同时它也是npm命令的入口文件。 npm 目前支持以下几类依赖包管理： dependencies devDependencies peerDependencies optiona
阅读全文
摘要：熟悉一下基于React的新项目。按照以往，我的步骤都是： git clone xxx npm install npm run dev 这时，JJ给我来了下面一段 git clone xxx yarn yarn start “咦，yarn是什么鬼？难道npm更高级的替代品？为什么要替代npm？难道有什
阅读全文
浙公网安备 33010602011771号