随笔分类 - react
摘要：## 前言 导致白屏的原因大概有两种，一为资源的加载，二为 JS 执行出错 本文就 JS 中执行的报错，会比较容易造成"**白屏**"场景，和能解决这些问题的一些方法，作出一个汇总 ## 常见的错误 ### SyntaxError > **`SyntaxError`**（语法错误）对象代表尝试解析不
阅读全文
摘要：## 前言 之前开发重构项目的时候，遇到了一些问题， 如 `hooks` 的性能问题和 `quill` 的重载问题。本文就是记录这些问题的解决过程。 ## 场景 在基于富文本的输入场景中，我们发现在输入回车后会出现明显的卡顿现象。为了更好地展示此类场景，这里使用了一个简单的例子展示。 ```tsx
阅读全文
摘要：前言 本文主要介绍 react-native(下称 RN) 的入门, 和前端的异同点 文章不涉及功能的具体实现 选择优势 我们先说说, 为什么很多人会选择使用 RN 、他对应的特性和普通 Web 的区别 前端资源, 生态的互通 因为使用的语言是 JS 和 react, 对于前端来说可以无缝切换, 并
阅读全文
摘要：背景 在当前业务项目中使用的 react-router 版本为 3.x, 而当前主流使用的是 5.x 以上, 本文就来探究 react-router 升级的方案 当前情况 目前使用的是 react-router3.x 版本 再加上和 redux 的搭配库 react-router-redux 一起使
阅读全文
摘要：前言 在前一段时间做一个需求的时候, 碰到一个自定义列表的功能, 他的所有数据显示都是通过 jSON 字符串来存储,使用也是通过 JSON 解析 起先他是有数据上限的, 但是后面提高上限后就出现了卡顿等问题, 所以本文就是介绍一些方案来解决前端大量数据的渲染问题 方案 innerHTML 首先是在很
阅读全文
摘要：react-window 这篇是 react-window 的源码阅读, 因为此库使用的是 flow, 所以会涉及一些特殊的东西, 和 ts 类似 使用 List 首先是 List 的使用: import {FixedSizeList as List} from 'react-window'; co
阅读全文
摘要：前言: 这次本来想解析 react-virtualized 的源码, 但是他的内容太多, 太杂, 我们先从小的库入手, 由点及面 所以这次改为了 react-virtual 和 react-window 的源码, 这篇就是 react-virtual 什么是虚拟列表 一个虚拟列表是指当我们有成千上万
阅读全文
摘要：这次的版本是 6.0.2 这里只讲 react-router-dom 提供的 API, 像是 Routes, Router 这些都是 react-router 提供的 ##源码阅读 BrowserRouter, HashRouter BrowserRouter 和 hashRouter 的主要区别就
阅读全文
摘要：react-loadable 源码解析 简要的来说, loadable 是一个高阶函数, 他同时利用了 react 的渲染 API, webpack 知识点, babel, promise 合并起来的组件 使用 首先我们要知道 react-loadable 他的用法是什么: loader 需要延迟加
阅读全文
摘要：redux 源码浅析 redux 版本号: "redux": "4.0.5" redux 作为一个十分常用的状态容器库, 大家都应该见识过, 他很小巧, 只有 2kb, 但是珍贵的是他的 reducer 和 dispatch 这种思想方式 在阅读此文之前, 先了解/使用 redux 相关知识点, 才
阅读全文
摘要：react-redux 版本号 7.2.3 react-redux 依赖的库: "dependencies": { "@babel/runtime": "^7.12.1", "@types/react-redux": "^7.1.16", "hoist-non-react-statics": "^3
阅读全文
摘要：当一个 APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是 APP 更新. 热更新暂且不说,这篇文章就讲讲 APP 如何更新 App更新流程 在 App 打开时请求接口或文件, 获取远程版本/版本更新说明/地址等等重用信息 通过库或者原生方案
阅读全文
摘要：方案 1 普通使用 在组件中直接创建 modal 显示: const {useState, useMemo} = React const useModal = () => { const [visible, setVisible] = useState(false) return useMemo((
阅读全文
摘要：首先写 2 个组件,打印一下他们的属性: const TextFunc = (props) => { console.log('render TextFunc',props) return <div>function</div> } class TextComponent extends React
阅读全文
摘要：mapStateToProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上。 （1）这个函数的第一个参数就是 Redux 的 store，我们从中摘取了 count 属性。你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要
阅读全文
摘要：最近意外发现了这个框架,从这框架的说明和我的实践来看,确实是以后 PC 端的主流框架, 大家都知道 electron 的唯二缺点: 1. 性能较差 2.包的尺寸太大.下面给出使用 tauri 的理由 tauri 介绍 以下介绍来自官方说明: 为什么使用 tauri 原始Tauri应用程序的打包大小小
阅读全文
摘要：最近找了一些文档的生成工具,结果发现了这个 可以通过注释,自动生成对应的文档,对于 react 库来说十分方便 安装 typescript 支持 配置 这次的例子是使用 cra 来创建的项目,还有其他项目也是支持的 "点击参考" 在根文件夹下创建 文件 可以使用如下的配置 更加具体的配置项可以 "点
阅读全文
摘要：关于 mobX 在 react 16.8.0 以上的用法 以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; const Hooks = observer(() => { const todo = useLo
阅读全文
摘要：针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 github 链接 "redux react hook" 一个简单的使用例子: 使用方法和以前一致 二.使用 use
阅读全文
摘要：useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: 区别在于第一个参数,还有参数的传递,另外 useCallback 中 DependencyList 是一个必须值 这两个 api 的作用基本就是缓存数据/方法 使用过 react 的人都知道,在组
阅读全文