随笔分类 - React
React 开发技巧
摘要：在 Redux Saga 中实现轮询接口调用有多种方式，具体取决于你希望的控制粒度（如是否需要手动停止、错误重试策略等）。以下是几种常见的实现模式。 1. 简单循环 + delay 最直接的方式：在 while 循环中使用 delay 控制间隔，每次循环调用 API。 import { call,
阅读全文
摘要：在 React 项目中使用 CSS Modules 并结合 BEM 命名规范时，你遇到的“对象名称不支持 -”问题，是因为 JavaScript 对象属性名中不能直接包含连字符，但可以通过 方括号语法 来访问。以下是几种常见且推荐的实践方式： 1. 使用方括号语法访问带连字符的类名 这是最直接的方法
阅读全文
摘要：在 React 15 中，componentWillReceiveProps 和 componentDidUpdate 的多次调用，本质上是同步渲染架构和生命周期设计共同作用的结果。 下面分别解释它们为何会被重复调用。 1. componentWillReceiveProps 多次调用 触发条件 c
阅读全文
摘要：在 React 15 中，类组件的 render 方法被多次调用是一个常见现象，这主要是由 React 15 的同步渲染架构和协调（Reconciliation）机制决定的。 React 15 的渲染过程是同步且不可中断的。一旦开始渲染，就会从根组件一直递归渲染到底。在这种机制下，render 被多
阅读全文
摘要：在 React 15 中，代码逻辑复用主要有三种成熟的方案，按时间顺序分别是 Mixins、高阶组件 (HOC) 和 Render Props。其中，后两者是当时社区和官方推荐的主流模式，而 Mixins 已逐渐被弃用。 1. Mixins（已不推荐） 这是 React 早期（使用 React.cr
阅读全文
摘要：在 React 15 中，这个问题的核心在于 componentWillReceiveProps 生命周期中无条件地将新 props 同步到 state，导致用户修改的本地状态被覆盖。要解决这个问题，需要改变同步策略：只在必要的时候（例如数据源切换）才重置 state，否则保留用户已修改的状态。 下
阅读全文
摘要：React.PureComponent 是 React 15.3 引入的一个优化手段，它通过浅比较（shallow compare）props 和 state 来自动实现 shouldComponentUpdate，从而避免不必要的重新渲染。理解何时使用它，可以帮你写出更高效的 React 应用。
阅读全文
摘要：在 React 15 中，类组件的 render 方法被多次调用是一个常见现象，这主要是由 React 15 的同步渲染架构和协调（Reconciliation）机制决定的。 React 15 的渲染过程是同步且不可中断的。一旦开始渲染，就会从根组件一直递归渲染到底。在这种机制下，render 被多
阅读全文
摘要：简短的回答是：在大多数场景下可以，但并不完全等价，且在使用上有一些重要的区别和限制。 让我详细分析一下两者的区别以及使用componentDidUpdate替代时的注意事项： 1. 触发时机不同 componentWillReceiveProps（旧方案） 触发时机：在组件收到新props时触发，发
阅读全文
摘要：在 React 15 中，生命周期函数主要分为 挂载（Mounting）、更新（Updating） 和 卸载（Unmounting） 三个阶段。以下是每个生命周期函数的详细说明及使用场景： 一、挂载阶段（组件实例被创建并插入 DOM） constructor(props) 触发时机：组件实例化时最先
阅读全文
摘要：在React 15中实现组件间的自定义事件通信，通常采用"发布-订阅"（Pub-Sub）模式。这种模式能让你摆脱繁琐的props层层传递，让任意两个组件直接"对话"。根据你的项目需求，主要有三种实现方式，我按推荐程度逐一介绍。 🎯 方案一：使用专门的库（如mitt） 这是最推荐的方式，特别适合中等
阅读全文
摘要：在React 15中，我们平时使用的onClick、onChange这样写好的事件，其实幕后有一套“订阅/发送”的机制在运作。这套机制和我们通常理解的手动监听和触发自定义事件不同，它内嵌于React的底层，核心是事件委托和统一的事件调度。 React 15的事件系统就像一个智能的“事件中转站”，所有
阅读全文
摘要：BEM 是一种前端 CSS 命名方法论，全称是 Block Element Modifier。它的核心思想是将用户界面拆分成独立的块（Block），通过元素（Element）和修饰符（Modifier）来描述其状态和结构，以此来解决 CSS 样式冲突、命名混乱以及代码难以维护的问题。 一、BEM 的
阅读全文
摘要：在 React 项目中使用 CSS Modules 并结合 BEM 命名规范时，你遇到的“对象名称不支持 -”问题，是因为 JavaScript 对象属性名中不能直接包含连字符，但可以通过 方括号语法 来访问。以下是几种常见且推荐的实践方式： 1. 使用方括号语法访问带连字符的类名 这是最直接的方法
阅读全文
摘要：这是一个很好的问题！在 Sass 开发中，嵌套结构和扁平结构各有优劣，没有绝对的"好"与"不好"，关键在于根据具体场景选择合适的方案。下面我从多个角度详细分析，并结合 React 15 + CSS Modules 的场景给出建议。 两种结构的对比 1. 嵌套结构 (Nested) // 深嵌套风格
阅读全文
摘要：在 Sass 中，@mixin 和 @extend 是两个非常重要的代码复用机制，但它们的工作方式和适用场景有显著的区别。理解这些区别对于写出高效、可维护的 Sass 代码至关重要。 核心区别对比 维度 @mixin (混合宏) @extend (继承) 编译方式 复制代码：每次调用都会复制一份样式
阅读全文
摘要：在 React 15 项目中，使用 CSS Modules 进行组件的样式模块化开发，是当时解决样式冲突和提升代码可维护性的最佳实践。核心思路是每个组件都拥有一个独立且唯一的样式文件，并通过对象属性的方式在 JavaScript 中引用类名。 下面我将从配置、开发规范、以及在 React 15 生命
阅读全文
摘要：在 React 15 项目中使用 Sass，核心思路和现在基本一致，主要区别在于构建工具（Webpack）的配置方式。因为 React 15 时代 create-react-app 还不像现在这样内置了对 Sass 的支持，所以通常需要手动配置 Webpack。 核心步骤概览 简单来说，你需要通过
阅读全文
摘要：对 React 15 应用进行性能优化，核心思路是针对其同步渲染和递归更新的机制，通过减少不必要的渲染和资源消耗来提升效率。我将从几个关键维度为你梳理具体的优化策略。 🛠️ 排查性能问题：先诊断，后优化 在动手优化前，先找到性能瓶颈在哪里会更有效。React 15 时代有几个很实用的工具可以帮助你
阅读全文
摘要：答案很明确：在标准的Web浏览器中，原生的 asyncSessionStorage API 是不存在的。 浏览器提供的原生存储API是同步的 sessionStorage。你在 Redux-Persist v4 的文档或代码示例中看到的 asyncSessionStorage，其实是该库为了统一We
阅读全文
浙公网安备 33010602011771号