React
文章平均质量分 96
react
超悠閒
博客文章倉庫:https://github.com/superfreeeee/Blog
博客代码仓库:https://github.com/superfreeeee/Blog-code
展开
-
React 进阶: useSyncExternalStore API 外部状态管理
本篇从外部状态的接入 React 框架状态体系为接入点,梳理从自定义到两个 React API 的使用方式与相关优化差异与思考原创 2022-10-19 00:58:17 · 2052 阅读 · 0 评论 -
React SSR: 基于 express 自构建 SSR 服务端渲染
基于 express 服务端,自构建 React SSR 项目,梳理 SSR 渲染流程与相关问题讨论原创 2022-10-16 16:52:12 · 828 阅读 · 0 评论 -
React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案文章目录React Router 升级 v6: Redirect 重定向替代方案React Router v6 Redirect 更新官方推荐方案 1: 使用 Navigate 组件替代官方推荐方案 2: 自定义 Redirect 组件自定义 Redirect 示例: 防止异常跳转并上报完整代码示例参考连接React Router v6 Redirect 更新React Router 的第六版做了许多破坏性的更新,其中一个就是将原创 2022-03-03 16:09:58 · 7588 阅读 · 0 评论 -
React 状态管理: Recoil - Facebook 状态管理
React 状态管理: Recoil - Facebook 状态管理文章目录React 状态管理: Recoil - Facebook 状态管理Recoil 概念Recoil 示例0. RecoilRoot1. Atom 状态2. Selector 导出状态3. Async Selector 异步导出状态4. Atom Family 状态类5. Selector Family 导出状态类6. RecoilBridge: 跨 Root 通信小结参考连接完整代码示例Recoil 概念第一次尝试 Recoi原创 2022-01-14 22:26:16 · 1135 阅读 · 0 评论 -
React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合
React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合文章目录React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合代码拆分(懒加载)1. react-loadable 实现2. 简单实现3. 使用 Suspense + lazy 实现4. 闪烁问题参考连接完整代码示例代码拆分(懒加载)对于一些人可能会把代码拆分与模块化搞混(对说的就是作者自己),但是我们必须明白一件事情:通常我们使用 React + Webpac原创 2022-01-07 00:16:54 · 1158 阅读 · 0 评论 -
react-intersection-observer 源码解析二连发
react-intersection-observer 源码解析二连发文章目录react-intersection-observer 源码解析二连发正文1. IntersectionObserver API2. @researchgate/react-intersection-observer@1.3.52.1 类型定义 types2.2 观察者封装 observer2.2.1 模块结构2.2.2 观察者实例缓存/记录2.2.3 查找观察目标2.2.4 创建观察者2.2.5 观察/取消观察方法2.3 ho原创 2021-11-04 16:22:01 · 551 阅读 · 0 评论 -
React 优化: 到底怎么用 useCallback 才是正确的?
React 优化: 到底怎么用 useCallback 才是正确的?文章目录React 优化: 到底怎么用 useCallback 才是正确的?前言正文0. 环境准备1. 普通场景2. 存在子组件3. 没有子组件的情况下使用 useCallback4. 存在子组件的情况下使用 useCallbackReact 组件概念 & 组件更新机制梳理5. 使用 React.memo 与 useCallback 协同6. 使用 useMemo 与 useCallback 协同useCallback 与 use原创 2021-07-24 10:42:23 · 1418 阅读 · 0 评论 -
React Hook: 高级 Hook API
React Hook: 高级 Hook API文章目录React Hook: 高级 Hook API前言正文1. useReducer2. useMemo3. useCallback4. useRef5. useImperativeHandle6. useLayoutEffect7. useDebugValue结语其他资源参考连接完整代码示例前言继前一篇 - React 升级: Hook API 基础,介绍了三个基本的 Hook:useState、useEffect、useContext今天要来介绍原创 2021-07-14 08:52:06 · 241 阅读 · 1 评论 -
React 路由: react-router-dom 前端路由 + connected-react-router 与 redux 连用
React 路由: react-router-dom 前端路由 + connected-react-router 与 redux 连用文章目录React 路由: react-router-dom 前端路由 + connected-react-router 与 redux 连用前言正文1. 基础使用1.0 安装依赖1.1 路由定义1.2 匹配类组件1.3 匹配函数组件1.3.1 非直接相关函数组件1.3.2 非直接相关类组件2. 与 redux 连用2.0 安装依赖2.1 configureStore 配置原创 2021-07-11 19:32:12 · 663 阅读 · 1 评论 -
React 升级: Hook API 基础
React 升级: Hook API 基础文章目录React 升级: Hook API 基础系列文章前言Hook API正文0. 类组件 vs 函数组件1. State Hook: useState1.1 实现差异1.2 useState API2. Effect Hook: useEffect2.1 实现差异2.2 useEffect API2.3 useRef API3. Context Hook: useContext3.1 Context & Provider HOC3.2 Consume原创 2021-06-03 20:28:57 · 251 阅读 · 0 评论 -
React 核心特性: 3 种创建 Refs 引用 & 2 种 Refs 转发的方法
React 核心特性: 3 种创建 Refs 引用 & 2 种 Refs 转发的方法文章目录React 核心特性: 3 种创建 Refs 引用 & 2 种 Refs 转发的方法前言正文0. 概念1. 字符串 Refs(Depracated 废弃的方案)2. 回调 Refs3. React.createRef 创建 Refs 引用(推荐)4. React.forwardRef 传递 Refs 引用5. Ref Props 透过别名传递结语其他资源参考连接完整代码示例前言在 React、V原创 2021-06-02 18:24:32 · 375 阅读 · 0 评论 -
React 高阶指引: Context 上下文 & 组件组合 & Render Props
React 高阶指引: Context 上下文 & 组件组合 & Render Props文章目录React 高阶指引: Context 上下文 & 组件组合 & Render Props前言正文1. Context 上下文1.1 使用动机 & 场景1.2 基本用法:Provider + Consumer1.2.1 定义全局数据对象1.2.2 React.createContext 创建上下文对象 ThemeContext1.2.3 使用 ThemeContext.原创 2021-06-02 04:24:01 · 741 阅读 · 1 评论 -
React 高级指引: 从状态提升到高阶组件(HOC)
React 高级指引: 从状态提升到高阶组件(HOC)文章目录React 高级指引: 从状态提升到高阶组件(HOC)前言正文1. 状态提升1.1 第一个组件1.2 两个实例1.3 将实例放到一个组件中共享状态1.3.1 摄氏 / 华氏温度互相转换1.3.2 两个输入框的组件1.4 状态提升1.4.1 共享状态1.4.2 叶子组件(状态消费者)1.4.3 状态流图1.5 状态提升小结2. 高阶组件 HOC2.1 抽象数据源 DataSource2.1.1 addChangeListener, removeC原创 2021-06-01 12:46:52 · 359 阅读 · 1 评论 -
React 入门: 核心特性全面解析
React 入门: 核心特性全面解析文章目录React 入门: 核心特性全面解析前言正文0. 项目搭建1. JSX1.1 揭露 JSX 的神秘面纱1.2 扩展 JS(强化版的 html)1.3 ReactDOM 渲染模版2. 组件基础2.1 类组件(Class Component) vs 函数组件(Function Component)3. Props 属性/数据传递(父组件传递给子组件的属性/参数)3.1 构造函数参数 props3.2 渲染多个元素(React.Fragment 的使用)3.3 属性保原创 2021-05-28 01:58:04 · 300 阅读 · 1 评论 -
React 项目启动2:使用 webpack 手动创建 React 项目(附加 React Router + Redux)
React 项目启动2:使用 webpack 手动创建 React 项目(附加 React Router + Redux)文章目录React 项目启动2:使用 webpack 手动创建 React 项目(附加 React Router + Redux)前言正文1 项目依赖1.1 选用技术栈1.2 依赖包1.3 依赖包版本号1.4 依赖包版本选用说明1.4.1 `webpack-cli` & `webpack-dev-server`1.4.2 React Router2 项目初始化配置2.1 web原创 2021-05-03 03:25:01 · 333 阅读 · 2 评论 -
React項目啟動:create-react-app
React 項目啟動:create-react-app文章目錄React 項目啟動:create-react-app簡介參考正文創建項目結語簡介我們都知道當前三大主流框架為 Vue、React、Angular,幾乎瓜分了前端框架市,更有著許多以此為基礎延伸的框架(服務端渲染、靜態渲染、移動端)。本篇來介紹如何啟動一個 React 項目,使用的是 cra(create-react-app) 腳手架;React 項目也可以透過配置 webpack 手動搭建,不過那種方式就留到介紹 webpack 的時候來原创 2020-06-03 09:01:22 · 180 阅读 · 0 评论