react-router模块化配置因为公司的需要最近踏进了react坑，一直在挖坑填坑，在路由这一块折腾得不行。直接进入主题，配置react-router模块化 1.先下载react-router-domnpm install react-router-dom --save2.在相应的文件引入react-router-dom相应的模块import { BrowserRouter as Router, Route, Link } from "react-router-dom";3.在src子创建一个module目录，接着在module目录在创建一个router.js文件，用来配置路由。//router....
在最近的一个项目中，要求对 redux 数据做持久化处理，经过研究后成功实现，在此记录一下过程 我们可以使用 redux-persist 对数据做持久化处理 安装npm i --save redux-persist使用安装成功后，我们需要对 store 代码进行修改，这是我的 store 生成文件 import {applyMiddleware, createStore, compose} from redux; import {createLogger} from redux-logger; import thunk from redux-thunk; import reducers from ../reducers; ...
在使用react-router时会遇到奇怪的问题，比如当我们从首页进入详情页的时候，首页跳转到详情页，首页滚动的位置，进入到详情页的时候也会被记录下来，原因是由于共享了同一个history，所以对记录有所保留，这显然不符合我们的浏览习惯。 总结种解决方案： 方案一 <Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}><Route path="/" component={ App }> </Router>方案二 class Protol extends React.Component...
PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过Vue2的同学们应该都知道<transition>这个内置组件，它可以帮我们添加过渡动画，之前一直用它来给Vue-Router路由的跳转添加转场动画，使用起来非常便捷。那在React中应该如何给路由切换添加过渡动画呢？react-transition-group我们需要借助React的官方动画库react-transition-group，文档戳这里 react-transition-group提供了三个React组件，分别是<...
前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。 我会尽力把每个步骤讲明白，将我理解的全部讲出来。 文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入 本文中用到的技术 React V16 | React-Router v4 | Redux | Redux-thunk | express React 服务端渲染服务端渲染的基本套路就是用户请...
好吧，笔者是一个后端开发。以前是做C/S项目出身，毫无Web前端基础，为了更好地理解Web开发，去年开始尝试使用公司使用的前端框架React来搭建团队内部使用的系统。通过这个项目的开发，也让我更好地理解了前端同事的不容易，更加坚定了写好接口文档的决心。 最近在把自己做的这个内部系统迁移到公司的统一平台的时候，遇到了一个小问题，公司要求打包的目录名必须为dist，而我这个项目是使用create-react-app搭建的，所以打包的目录...
基础概念 SSR：即服务端渲染(Server Side Render) 传统的服务端渲染可以使用Java，php 等开发语言来实现，随着 Node.js 和相关前端领域技术的不断进步，前端同学也可以基于此完成独立的服务端渲染。 过程：浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备就绪 即：当前页面的内容是服务器生成好给到浏览器的。 对应CSR：即客户端渲染(Client Side Render) 过程：浏览器发送...
React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种: 组件懒加载(React.lazy(...)和<Suspense />)Pure ComponentshouldComponentUpdate(...){...}生命周期函数本文还会介绍React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法: React.memo。 无用的渲染 组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操...
less的安装配置 安装react-app-rewired，react-app-rewire-less，babel-plugin-import插件 执行命令： npm install react-app-rewired --save-dev npm install react-app-rewire-less --save-dev npm install babel-plugin-import --save-dev配置package.json文件 找到scripts属性，修改start的值为react-app-rewired start，如下图: 根目录下创建config-overrides.js文件 const { injectBabelPlugin } = require(react-app-rew...
模态框是一个常见的组件，下面让我们使用 React 实现一个现代化的模态框吧。组件设计模态框想必大家都很熟悉，是工作中常用的组件，可以让我们填写或展示一些信息而不必打开一个新页面。在开始编码之前，我们先来了解一个 React 模态框组件应该如何设计。React 是一个状态（数据）驱动的前端框架，一个模态框最重要的状态就是打开和关闭，visible，当 visible 为 true 时，模态框打开，反之亦然。 由于 React 所提倡的是一种声明式...
最近接手一个React项目，在IE下碰到了俩问题 IE11报错如下：跟踪一下之后，发现是一些其他的npm包里面用到了startsWith这个方法，可以自己polyfill一下： if (!String.prototype.startsWith) {String.prototype.startsWith = function (search, pos) {return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search} }不过加prototype的方法毕竟不好，可以通过引入@babel/polyfill解决，在入口文件中引入import '@bab...
前言 本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建 SSR 介绍 Server Slide Rendering，缩写为 ssr 即服务器端渲染，这个要从SEO说起，目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><link rel="shortcut icon" href="favicon.ico" rel="ex...
使用react-refetch来简化api获取数据的代码const List = ({data: gists}) => {return (<ul>{gists.map(gist => (<li key={gist.id}>{gist.description}</li>))}</ul>) }const withData = url => Part => {return class extends Component {state = {data: []}componentDidMount() {fetch(url).then(response => response.json ? response.json() : response).then(data => this.setState({data}))}render() {return <Part {...this...
electron是一两年前挺火的一个框架 本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 （当然听说mac上也可以用electron，不过没试过） （没错我还在用windows，不是mac也不是linux，我是个lowB） 团队主要的技术栈是react，所以考虑用react开发，方便维护。 PS.由于项目是大半年前做的，所以一些细节可能记忆有误请见谅 几个重点： 1.想要能调试必须使用we...
在现代的三大框架中，其中两个Vue和React框架，组件间传值方式有哪些？ 组件间的传值方式组件的传值场景无外乎以下几种： 父子之间兄弟之间多层级之间（孙子祖父或者更多）任意组件之间父子之间 Vue Vue是基于单项数据流设计的框架，但是提供了一些的语法，指令去实现一些操作 父->子：通过props进行传递数据给子组件子->父：通过emit向父组件传值同时，还有一些其他进行父子组件通信的方式，通过$parent和$children获取组件的父或...