Mo_Luffy的博客

使用Router自定义history即可import { Router } from 'react-router-dom';import { createBrowserHistory, createHashHistory } from 'history';// 根据需要选择hash还是h5路由, 然后就能在组件外通过history.push进行编程式导航了const history = ...

第一步 安装 http-proxy-middlewarenpm install http-proxy-middleware我们这里面请求用的axios，在将axios安装一下npm install axios第二步 src下创建一个 setupProxy.js文件里面书写一下代码第三步 需...

两者区别其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webpack 将不会处理它，在你打包的时候，会将public文件夹直接复制一份到你构建出来的文件夹中。而src/assets目录的文件（前提你在js中有引入），它会被webpack编译，比如图片，如果你的图片小于你在webpack中的loader下设置的limit大小（可配置），它会被编译成...

如果对Typescript不了解的可以先去官方API,学习一波TypeScript官方API(点击跳转)注意：不用清除的看懂代码，只需要了解类型即可，或者观看我其它博客可以有相应的介绍等1.React类型总览(包括React本身、router、antd的类型)1.1 React本身常用类型无状态组件，函数的类型定义，FunctionComponent<P={}>、简写FC&l...

React 16是最近一年多React更新最大的版本。除了让大家喜闻乐见的向下兼容的Fiber，防止了客户端react在进行渲染的时候阻塞页面的其他交互行为。Fiber源码速览参考https://juejin.im/post/5bea68a6e51d450cb20fdd70新的生命周期过程先来看看最新版本react的生命周期图：...

react 和 vue 为什么要设置key？key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点，提高diff速度，高效的更新 Virtual DOM;key值采用index和id的区别？const list 1 = [ { id: 1, name; 'test1' }, { id: 2, name; 'test2' }, { id: 3, nam...

alias配置首先在paths.js写好路径，如下module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), appHtml: resolveApp('publi...

以下内容会严格遵循下面三个观点这部分的每一个小块都是为了吹二者之一要怎么黑另外一个才能更好的达到吹的效果要吹得有理有据，黑得不带痕迹为什么这两个库可以被用来对比目的一致都是状态管理库，用来管理应用的内部状态受众大体一致一般都会被用到react中，虽然说这并不是必须的，你当然也可以用到vue或者angular里，但是，大多数情况下，都不会这么做可相互替代...

（本文为学习记录，如有错误谢谢指出，高手勿喷）在开发react单页面应用时，我们会遇到一个问题，那就是打包后的js文件特别巨大，首屏加载会特别缓慢。这个时候我们应该讲代码进行分割，按需加载，将js 拆分成若干个chunk.js,用到就加载，react-loadable就可以很好地解决这个问题。安装$ yarn add react-loadabl...

单页应用存在的问题1.SEO不友好2.首次请求时间较长，体验不好服务端渲染和客户端渲染的区别.客户端渲染路线：1.请求html2.服务端返回html3.浏览器下载html里面的js/css文件4.等待js文件下载完成5.等待js加载并初始化完成6.js代码可以运行后由js代码向后端请求数据( ajax/fetch )7.等待后端数据返回8.react-dom( 客户端 )从...

history插件的使用history这个插件可以方便管理你的浏览记录cnpm install history --saveimport createHistory from 'history/createBrowserHistory'三种方法有三种使用方式 createBrowserHistory 现代浏览器使用 createBrowserHistory(...

最近在react项目中遇到路由需要配置根目录路径问题，查了很多资料，最后终于解决了，记录一下，希望对React学习的人有帮助。问题描述：使用react框架创建项目时，使用react-router ,运行npm run dev 后，使用http://localhost:8080/home 即可访问首页。但真实情况下我们打包后放在后端的前端代码都会使用nginx配置，配置后访问的路径会带一个项目名...

前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。我会尽力把每个步骤讲明白，将我理解的全部讲出来。文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入。另外，自己使用服务端渲染过程中遇到的一些坑我也都记录在README里了。本文中用到的技术React V16 | Re...