React Streaming SSR原理示例深入解析
目录 功能简介 基本原理 使用示例 Streaming HTML Selective Hydration 降级逻辑 JS 和 CSS 设置 源码解析 数据结构 Segment Boundary Task Request 主要流程 功能简介 React 18 提供了一种新 »
React Streaming SSR原理示例深入解析
目录 功能简介 基本原理 使用示例 Streaming HTML Selective Hydration 降级逻辑 JS 和 CSS 设置 源码解析 数据结构 Segment Boundary Task Request 主要流程 功能简介 React 18 提供了一种新 »
React手写redux过程分步讲解
目录 一、最初 二、dispatch 三、subscribe 四、优化 最后 提起 Redux 我们想到最多的应该就是 React-redux 这个库，可是实际上 Redux 和 React-redux 并不是同一个东西, Redux 是一种架构模式，源于 Flux。 React-redux »
React 18中的state概念与使用、注意问题解决
目录 一、概念与基本使用 二、注意问题 引出问题 产生问题的原因 问题演示 解决问题 一、概念与基本使用 props中的所有属性都是不可变的，这使得React组件不能随着props的改变而改变。但在实际的开发中，我们更希望的是数据发生变化时，页面也会随着数据一起变化。React为我们提 »
React 18中的state概念与使用、注意问题解决
目录 一、概念与基本使用 二、注意问题 引出问题 产生问题的原因 问题演示 解决问题 一、概念与基本使用 props中的所有属性都是不可变的，这使得React组件不能随着props的改变而改变。但在实际的开发中，我们更希望的是数据发生变化时，页面也会随着数据一起变化。React为我们提 »
React useCallback钩子的作用方法demo
目录 简介 项目概述 项目进展 那么，问题出在哪里？ 问题的根本原因 解决方法 对函数进行记忆 总结 简介 如果你还不熟悉钩子的概念，请务必查看本文章，因为它对钩子的概念提供了一个非常好的、深入的概述，以及一些钩子的例子。 useCallback 钩子是用来缓存一个记忆化的回调 »
React useCallback钩子的作用方法demo
目录 简介 项目概述 项目进展 那么，问题出在哪里？ 问题的根本原因 解决方法 对函数进行记忆 总结 简介 如果你还不熟悉钩子的概念，请务必查看本文章，因为它对钩子的概念提供了一个非常好的、深入的概述，以及一些钩子的例子。 useCallback 钩子是用来缓存一个记忆化的回调 »
React数字滚动组件 numbers-scroll
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件，第一反应就是想找找网上大佬的东西顶礼膜拜一下，这一搜，还真是没找到趁手的╮(╯▽╰)╭。 最近接了大屏的需求，数字滚动肯定是免不了的，所以开始撸袖子，造轮子了（ numbers-scroll ）。 首先给大家看下轮子的效果吧： »
Objects are not valid as a React child报错解决
目录 总览 map JSON.stringify Date 花括号 async 总结 总览 当我们尝试在JSX代码中，直接渲染对象或者数组时，会产生"Objects are not valid as a React child"错误。为了解决该错误，在JSX代码中，使用map()方法来 »
Objects are not valid as a React child报错解决
目录 总览 map JSON.stringify Date 花括号 async 总结 总览 当我们尝试在JSX代码中，直接渲染对象或者数组时，会产生"Objects are not valid as a React child"错误。为了解决该错误，在JSX代码中，使用map()方法来 »
React+Electron快速创建并打包成桌面应用的实例代码
目录 一、创建react项目 二、安装Electron 三、配置文件 四、打包Electron桌面应用 一、创建react项目 首先使用creat-react-app脚手架来创建一个react项目 # 安装 create-react-app 命令,如果已将安装请忽略 npm insta »
React+Electron快速创建并打包成桌面应用的实例代码
目录 一、创建react项目 二、安装Electron 三、配置文件 四、打包Electron桌面应用 一、创建react项目 首先使用creat-react-app脚手架来创建一个react项目 # 安装 create-react-app 命令,如果已将安装请忽略 npm insta »
React安装node-sass失败解决方案分享
目录 第一种：修改源地址 第二种：使用sass(dart-sass)代替node-sass 补充：不同node-sass版本的环境 总结 最近发现困扰我的sass终于解决了 第一种：修改源地址 在项目的根路径中添加.npmrc文件，在这个文件中增加以下内容： sass_binary_s »
React安装node-sass失败解决方案分享
目录 第一种：修改源地址 第二种：使用sass(dart-sass)代替node-sass 补充：不同node-sass版本的环境 总结 最近发现困扰我的sass终于解决了 第一种：修改源地址 在项目的根路径中添加.npmrc文件，在这个文件中增加以下内容： sass_binary_s »
React使用Echarts/Ant-design-charts的案例代码
目录 React使用Echarts 1.React项目安装导入Echarts 2.组件页面中使用Echarts React使用Ant-design-charts 1.React项目安装导入Ant-design-charts 2.组件页面中使用Ant-design-charts 组件封装（封 »
React 之最小堆min heap图文详解
目录 二叉树 完全二叉树 二叉堆 最小堆 React 采用原因 React 函数实现 插入过程（push） >>> 1 删除过程（pop） halfLength peek 二叉树 二叉树（Binary tree），每个节点最多只有两个分支的树结构。通常分支被 »
react cropper图片裁切实例详解
目录 摘要 简介 安装 使用 总结 摘要 在最近的业务工作中，需要提供一个上传图片前先剪切图片的功能。有了这个业务需求，我就在寻找一些可以帮助我完成业务的库。那么我推荐两个库。一个是基础版本的react-cropper另一个是被别人封装过的。react-cropper-pro。可以根据自己 »
react hooks UI与业务逻辑分离必要性技术方案
目录 引言 业务的问题 hooks组件的分离 纯hooks组件的问题 hooks-view-model 基于class的viewModel写法与hooks有什么区别 配置生成项目模板文件 更好的debug能力 引言 当前端业务复杂度上升到一定程度的时候，如何提升前端代码质量便成了老生常谈的 »
React Suspense解决竞态条件详解
目录 前言 Suspense 执行机制 实际应用 好处：请求前置 好处：解决竞态条件 错误处理 源码 前言 在上一篇《React 之 Race Condition》中，我们最后引入了 Suspense 来解决竞态条件问题，本篇我们来详细讲解一下 Suspense。 Suspense »
monorepo实践：yarn workspace + vite + typescript + react
前言 最近需要用到多包管理 monorepo 开发新项目，所以提前预研一下项目搭建。 monorepo(monolithic repository)是一种项目架构，就是用一个仓库管理多个项目（应用，库），react和babel的源码仓库都是用这种方式在管理。 优缺点略过，可以参考：精读《Monore »