![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React全家桶
文章平均质量分 87
mjzhang1993
风起于青萍之末
展开
-
虚拟滚动列表的 React 实现 -- 简单的等高虚拟列表
参考剖析无限滚动虚拟列表的实现原理虚拟滚动列表的大致方案虚拟列表的实现,大致上的思路就是:只加载可是区域范围内的列表项,发生滚动时,动态计算哪些列表项需要渲染为实现,我们需要(以下步骤以列表项高度 itemHeight 确定的情况为例,列表项高度不定时会麻烦一些)有一个已知高度 height 的滚动容器 scrollContainer计算所有数据 data 都渲染所需要占用的高度 itemHeight * data.length , 然后用这个高度撑开滚动容器,从而获得滚动条及滚动容器原创 2022-04-21 18:40:45 · 2052 阅读 · 0 评论 -
升级到 React Router v6
说明React Router v6 正式版本与 2021-11 月发布,使用起来最大的感受是:全面拥抱 Hooks, 提供简洁的 api, 但是对类组件不是很友好,但是可以通过封装来使用。与 v5 版本相比 v6 使用 TS 重写,Api 较 v6 有了不少的改动,直接迁移不建议,工作量会很大,官方说会有一个向后兼容包 但是截止 2021-12-17 还没有看到,可以时刻关注官方的迁移文档 ,下边也会列举一些在迁移 v5 => v6 过程中的记录React Router v6 官方文档原创 2022-01-04 19:05:38 · 762 阅读 · 0 评论 -
使用 Immer 代替 immutable 在 react 项目中实现不可变数据
说明immer 的主旨是通过更简单的方式使用 immutable 不可变数据,它是基于 copy-on-write 机制的(如果资源重复未被修改,则无需创建新的资源,资源会在副本与原始位置之间共享;修改则必须创建一个副本;通过这个机制 复制操作会被推迟到第一次写入时进行,显著的减少资源消耗,同时资源修改操作增加少量开销)通常来讲 react 的 state 以及 redux 存放在 store 中的 state 都是不允许直接修改的, 需要我们手动去创建一个新的 state如果我们存放的数据中有 A原创 2021-05-20 17:32:05 · 1023 阅读 · 2 评论 -
封装 mobx 6 + typescript 实现React状态管理 (3) -- mobx 封装后常见场景使用案例
1. 类组件使用示例import { disposeOnUnmount } from 'mobx-react';import { Button } from 'antd';import { TGlobalStore, inject } from 'portalBase/store';import { Link } from 'react-router-dom';import UserCreateForm from './view/UserCreateForm';import UserList f原创 2021-05-14 19:06:26 · 928 阅读 · 0 评论 -
封装 mobx 6 + typescript 实现React状态管理 (2) -- mobx 封装
说明相比于 redux 的集中状态管理,mobx 在概念上的确更简洁、灵活一些,我们只需要创建一个"可观察"对象,然后将组件变成了"观察者"就可以监控可观察对象的变化,从而做出响应了。但是为了团队合作更加方便,提升开发效率。适当的做一些封装还是很有必要的封装原则封装繁琐的重复的部分,让日常使用时有更少的引用,更少的配置抽象通用的部分,提供更方便的接口、方法调用借助 Typescript 提供更全面的提示及纠错能力,尽量借助类型推断,减少使用时的代码量全面考虑使用场景,减少后续改动频次原创 2021-05-14 19:05:21 · 859 阅读 · 4 评论 -
mobx 6 + typescript 实现React状态管理 (1) -- mobx 基本使用及 Api 详解
说明重要依赖版本mobx: 6.3.0 | mobx-react: 7.1.0 | react: 17.0.21. MobX 概念及结合 React 的简单使用State:数据Derivations: 派生,是一些由 state 计算而来的数据Reactions: 反应,与派生类似,但是不会生成数据,而是会执行某些任务,一般用来DOM更新或者网络请求Actions:行动,所有对 state 的改动都应在这里进行,Action 中触发的 state 改动又会自动的触发 Derivati原创 2021-05-14 19:04:12 · 1000 阅读 · 1 评论 -
react按需加载
react-router webpack 按需加载,与路由权限控制说明 当网站规模越来越大,通过webpack 打包后的 react 项目也会越来越大,这会导致首页渲染时间变长,影响用户体验,webpack 提供了一种按需加载的方式,需要结合 react-router 使用,他会将代码拆分成多个小包,需要哪个部分就加载响应的包。 React-router-v4 - Web原创 2017-02-07 18:34:06 · 8756 阅读 · 4 评论 -
Next.js 实现 react 服务器端渲染
Next.js 实现 react 服务器端渲染说明 实现 路由跳转、redux 重要文件版本“next”: “^4.2.3”,“react”: “^16.2.0”,“react-dom”: “^16.2.0” Next.js GitHub 文档 项目源码使用 Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割1. 安装 yarn原创 2018-01-19 17:46:39 · 2791 阅读 · 1 评论 -
在 React 项目中使用 ECharts
在 React 项目中使用 ECharts说明 重要文件版本“react”: “^16.2.0”“echarts”: “^4.0.2”“redux”: “^3.7.2”,“react-router-dom”: “^4.2.2”“react-router-redux”: “^5.0.0-alpha.9”“react-hot-loader”: “^4.0.0-beta...原创 2018-02-08 11:59:04 · 8121 阅读 · 0 评论 -
React 项目中使用 MobX 进行状态管理
React 项目中使用 MobX 进行状态管理说明 MobX 是一个简单的、可扩展的状态管理器,他通过透明的函数式编程使得状态管理变的简单和可扩展 React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。 参考 MobX 中文文档 完整项目代码概念原创 2018-02-24 09:54:54 · 4104 阅读 · 2 评论 -
Flux 使用整理
Flux 使用整理 注意:代码中用到了 Flow | Immutable ,可能会影响阅读,请忽略相关代码说明 Flux 是 Facebook 开发,用来帮助 React 之类的应用做状态管理的模式,它利用单向数据流,来梳理复杂的状态 一个 Flux 应用由三个部分组成dispatcher 负责分发事件store 负责保存数据,并且响应事件更新数据vie...原创 2018-09-13 15:35:12 · 2844 阅读 · 0 评论 -
Flow 在 react 项目中基本使用
Flow 在 react 项目中基本使用说明 Flow 是一个静态类型检查器,可以在编码时识别问题并快速反馈,它专门为 JavaScript 程序员设计,能够理解常用的 JS 语言及其动态特性,开发时Flow 会给出错误类型提示,但是他不会禁止代码运行0. 安装及配置全局安装 flow-bin# 全局安装npm install -g flow-bin...原创 2018-09-13 18:25:35 · 5198 阅读 · 0 评论 -
使用 Rollup 开发 React 组件库
使用 Rollup 开发 React 组件库说明Rollup 是一个 JavaScript 模块打包器,他可以静态分析代码中的 import 并排除任何未实际使用的代码,可以极大的缩小项目(Tree-shaking), 与 Webpack 相比,Rollup 更多的被用于类库的开发rollup.js 中文文档 中文文档不够全面,有些内容还是要到英文官网查找rollup.js 英文官网...原创 2018-12-18 13:47:51 · 7980 阅读 · 3 评论 -
redux 状态管理进阶使用
Redux 状态管理进阶使用实现 state(Reducer) 的分层Reducer 动态插入多个 store 实例实现及调试1. 实现 state(Reducer) 的分层前提:redux 中的 Reducer 定义的是一个纯函数,他接收 state | action 两个参数,返回一个新的 state;combineReducers 是 redux 提供的方法,他可以用来将...原创 2019-01-29 19:34:54 · 680 阅读 · 0 评论 -
react-router 4 升级攻略
react-router 从 2 / 3 升级到 4.x.x1. 说明 react-router 版本更新到 4.x.x 已经有一段时间了,但是由于 API 改动较大,为了项目的稳定,一直没有更新,最近有了空闲时间,整体对 react 的项目进行了一次升级,这里记录一下 如何从 react-router 2.x.x/3.x.x 迁移到 react-router 4.x.x原创 2017-06-28 18:46:49 · 6008 阅读 · 0 评论 -
React-router-v4 - Webpack 实现按需加载(code-splitting)
React-router-v4 - Webpack 实现按需加载(code-splitting)方法一、结合 bundle-loader 实现按需加载1. 首先创建一个包装组件 Bundle 一下是 react-router4.0 官方文档中给出的例子 import React from 'react'; export default class原创 2018-01-18 12:20:33 · 4699 阅读 · 6 评论 -
react学习总结3--React-Router
react 学习总结–React-Router说明 react-route 版本 : “^3.0.0” react-router-redux 版本 ; “^4.0.7” 升级到 react-router 4 看这里 react16 + react-router4 + webpack开发环境搭建简介 react 本身没有路由功能,必须借助第三方原创 2016-12-17 14:09:06 · 6704 阅读 · 2 评论 -
react学习总结2--基础(二)
react 学习总结–基础(二)说明 React 版本 :”15.4.1” react-tap-event-plugin 版本: “^2.0.1”1.数据流 在 React 中,数据流的流向是单向的–从父节点传递到子节点,因而组件是简单且易于把握的,他们只需从父节点获取props渲染即可 React 组件内部还具有自己的状态,这些状态只能在组件内修改,React组件本身原创 2016-12-17 14:07:50 · 5834 阅读 · 2 评论 -
react学习总结4--Redux
react 学习总结–Redux、React Redux说明 redux 版本 :”3.6.0” react-redux 版本: “^4.4.6” redux-thunk 版本: “2.1.0”1.为什么用Redux React只是 MVC 中的 V 层,并不是完整的Web应用解决方案,如果应用的交互比较多,那么只使用React,会使得代码复杂,不易阅读,Redux使用原创 2016-12-17 14:10:44 · 1194 阅读 · 0 评论 -
react学习总结7--可能会遇到的BUG
react学习总结–可能会遇到的BUG说明 像我这样的野路子新手,学习React的过程中,会遇到很多坑,下边列举了我遇到的一些问题以及解决办法,但是很遗憾,这篇文章是我初步完成项目的时候写的,有很多BUG,解决了就忘记了,只能根据记忆列举一些。1.版本问题引起的BUG 这个问题很常见,因为 React、React-Router,在某几个版本之间有较大的改动,很多API,改变了用法,甚至有些原创 2016-12-17 15:38:29 · 1482 阅读 · 0 评论 -
immutable学习
immutable学习简介 js 中的对象时引用赋值,是可变的,新的对象简单的引用原始的对象,改变新的对象将影响到原始对象,这样虽然可以节约内存,但是当应用复杂后,会造成很大的隐患,一般的解决办法是进行浅拷贝和深拷贝来避免被修改,但是这样会造成内存的浪费,引用自Immutable 详解及 React 中实践 Immutable Data 就是一旦创建,就不能再被更改的数据。对其进行任何原创 2016-12-28 18:22:07 · 914 阅读 · 0 评论 -
react学习总结8--性能提升
react 学习总结8–性能提升性能提升总结 基本上就是参照了这篇文章,可以直接去看 写这篇文章主要是为了做一个记录,公司项目暂时不会使用 immutable 等。谨慎使用 setState,容易导致重新渲染方法的 bind ,写在 constructor 中传递给组件的 props,一定要是有用的,减少 shouldComponentUpdate 的负担,减少使用{…props}原创 2016-12-29 16:53:01 · 643 阅读 · 0 评论 -
react学习总结-梳理
react学习总结–梳理说明 使用 React 开发项目,仅仅靠它自己是不够的,需要花费更多的时间去学习与之配套的技术,像是:Redux、React-Router 、Gulp(或者是Webpack)、Browserify、ES6 等,下面是我梳理的使用React的简易流程技术要求开发工具 : Atom 构建工具 : Gulp + BrowserifyES6 语法编写 JS,Sass 编写原创 2017-01-06 10:06:07 · 1463 阅读 · 0 评论 -
react学习总结9--深入理解
深入学习react官网1.拆分所有用户界面为一个组件树 首先为所有组件命名并画上线框图 拆分组件的原则:单一功能原则,理想状态下一个组件应该只做一件事2.利用react,创建应用的一个静态版本3.识别出最小的(但是完整的)代表UI的state 为了使UI可交互,需要能够触发底层数据模型的变化,需要用到state,关键在于精简,不要存储重复的数据,可以分析是否需要state1.是否原创 2017-01-06 10:43:12 · 512 阅读 · 0 评论 -
react学习总结5--构建工具 Gulp、Browserify(一)
react 学习总结–构建工具Gulp、Browserify(一)说明 关于构建工具,以前只用过 fis(使用的很基础),入职新公司,前端只有我一个人,所以只能自己学 gulp 了,各种插件都是去 这里 查看文档,按照文档一点一点试出来的。学习期间,感觉像我这样的新手,最需要的还是一个中小型项目的完整目录结构,然后根据目录结构去配置gulpfile.js,可惜,博客和GitHub上有很多讲解的很原创 2016-12-17 14:11:56 · 736 阅读 · 0 评论 -
react学习总结6--构建工具Gulp、Browserify(二)
react 学习总结–构建工具Gulp、Browserify(二)1.html 文件处理gulp-htmlmin 插件 用于压缩html,可以进行配置,下边是配置信息(选填) var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlmin', function ()原创 2016-12-17 14:12:40 · 1094 阅读 · 0 评论 -
React - Webpack 开发环境重新搭建
React - Webpack 开发环境重新搭建说明 距离初次使用 react 已经有一年半左右的时间,无论是 react 全家桶(redux react-router 等)还是构建工具 webpack 等都有了版本的更新,配置使用上多少都发生了变化,这里针对当前最新的版本重新搭建做一下记录方便日后查询。 webpack 环境配置参考了 vue-cli 中的 webpack原创 2018-01-09 15:31:17 · 3574 阅读 · 0 评论 -
重新搭建 React - Redux - Router 完整项目
重新搭建 React - Redux - Router 完整项目说明重新看了一遍 React 16.2.0 的文档,针对 react 的变化,以及使用习惯做了重新的总结,上一篇 重新搭建 react 开发环境 已经完成,这里继续针对 react 项目搭建进一步记录。 源码 开发环境搭建 react 升级到 16重要文件版本 node:原创 2018-01-10 13:33:35 · 9406 阅读 · 2 评论 -
react 升级到 16.2.0 记录
React 升级到 16.2.0 使用记录说明 最新中文官方文档 react 完整项目案例react 开发环境搭建React 项目中使用 MobX 进行状态管理1. 函数定义组件与类定义组件 针对有复杂状态或者有多个事件处理函数的组件尽量使用 ‘类定义组件’;而对于简单的展示型组件,可以使用函数定义组件,减少代码量,函数的第一个参数是传入的 props...原创 2018-01-10 16:46:56 · 4877 阅读 · 0 评论 -
webpack-3 react-router-4 react-15.6 升级记录
webpack-3 react-router-4 react-15.6 升级记录 模板源码 react16 + react-router4 + webpack开发环境搭建说明1. react-router 升级到 4.1.2,API 变化很大,具体API解析,请看这篇文章react-router 4 升级攻略2. 从 webpack 2.x 升级到 webpac原创 2017-07-25 13:25:14 · 2624 阅读 · 0 评论 -
react学习总结1--基础(一)
react 学习总结–基础(一)说明 React 版本 :”15.4.1” react-tap-event-plugin 版本: “^2.0.1”1.react 是什么 React 是 Facebook 内部的一个JavaScript类库,可用于创建Web用户交互界面。他引入了一种新的方式来处理浏览器DOM,只需要声明式的定义各个时间点的用户界面,无需关心数据变化时需要更新那一部原创 2016-12-17 13:59:22 · 813 阅读 · 0 评论