随笔分类 - React
React 开发技巧
摘要：在 React 15 项目中使用 React Router v3 进行路由跳转和数据传递，核心是理解其集中式路由配置和基于 props 的数据流。下面我们分别来看跳转和传参的具体实现。 路由跳转 React Router v3 提供了三种主要的路由跳转方式，你可以根据使用场景灵活选择。 跳转方式 使
阅读全文
摘要：在 React 15 中使用 React Router v3，核心是采用集中式路由配置。你需要在应用顶层使用 <Router> 组件定义好所有路由规则，并通过 history 来同步 URL 与 UI。 下面是一个完整的示例和详细说明。 1. 安装 首先，你需要在项目中安装正确的版本。根据 Reac
阅读全文
摘要：在React 15 + Redux的架构中，数据存储位置的选择主要遵循以下原则。针对你的场景，我来详细分析： 应该存储在 Redux store 中的数据 1. 表格列表数据 // 应该放在 Redux 中 { tableData: { list: [...], // 表格数据 total: 100
阅读全文
摘要：完全可以使用对象映射来代替 Redux reducer 中的 switch case 语句, 这种写法更加简洁、易维护，也符合函数式编程的思想。以下是几种实现方式： 1. 基础对象映射方式 // 定义 action 类型常量 const TYPES = { ADD_TODO: 'ADD_TODO',
阅读全文
摘要：combineReducers 是 Redux 提供的一个辅助函数，它的主要作用是将多个不同的 reducer 函数合并成一个单一的 reducer 函数，以便传递给 Redux 的 createStore。 简单来说，它的核心作用是：按模块拆分状态，按功能管理数据。 以下是它的详细作用、原理和使用
阅读全文
摘要：模式一：单容器 + 多展示组件（Props Drilling 模式） 这是比较传统的 React 组件通信方式。只有一个顶层容器负责与 Redux Store 连接，获取所有数据，然后通过 props 一层层传递给内部的展示组件。 graph TD subgraph Redux Store A[全局
阅读全文
摘要：这是一个非常深入且重要的问题！你提到的这种写法确实是正确的，而且背后涉及到 Redux 内部的一个关键机制：bindActionCreators。 让我详细解释为什么这种写法能正常工作： 🔍 问题重现 先看这两种写法的对比： // 写法1：显式使用 dispatch（你提到的“标准写法”） con
阅读全文
摘要：在 React 15 时代，React-Redux 的工作原理和现在（React 16.8+ Hooks时代）在核心思想上是一致的，但实现方式和使用方法有很大的不同。 在 React 15 中，React 还没有 Hooks，也没有现在的 useContext。因此，React-Redux 必须依赖
阅读全文
摘要：React-Redux 是 Redux 官方提供的 React 绑定库，它的核心作用是将 Redux 的 store 和 React 组件连接起来，让 React 组件能方便地读取和更新全局状态 。简单来说，它就像一座桥梁，把 React 的 UI 和 Redux 的状态管理无缝衔接起来。 它的工作
阅读全文
摘要：在 Redux Saga 中，takeLatest 是一个** Effect 创建函数，它的作用是只处理最后一次触发的任务**，自动取消之前仍在进行中的任务。 工作原理 当使用 takeLatest 监听某个 Action 类型时： 第一次触发：启动对应的 Saga 任务 再次触发：如果前一个任务尚
阅读全文
摘要：在 redux-saga 中，take 是一个非常重要的 Effect 创建函数，它的核心作用是：阻塞性地等待一个指定的 Redux Action 被发起。 具体作用 阻塞执行：当 Saga 中执行到 yield take(actionType) 这一行时，Saga 会暂停在此处，不再往下执行。 等
阅读全文
摘要：在 Redux-Saga 中，fork 是一个非常重要的 Effect 创建器，它用于执行非阻塞的任务调用。 简单来说，fork 的作用是：让 Saga 启动一个子任务，并且父 Saga 不会等待这个子任务结束，会立即继续执行后续代码。 下面从几个方面详细解释 fork 的作用和特点： 1. 核心特
阅读全文
摘要：Redux-Saga 本质上是一个 基于 Generator 函数 + 事件监听 的 Redux 中间件，它的核心原理可以从以下几个维度深入理解： 1. 底层架构原理 1.1 中间件机制 // Redux-Saga 中间件的简化实现 const sagaMiddleware = store => n
阅读全文
摘要：Redux-Saga 是一个用于管理 Redux 应用副作用的中间件，通过 ES6 的 Generator 函数让异步流程更易管理。 1. 基础安装与配置 npm install redux-saga // store.js import { createStore, applyMiddleware
阅读全文
摘要：React-Router帮助我们实现单页应用的路由跳转功能 1. 简单路由 src/pags/home.js const Home = () => { return ( <div>Home</div> ); }; src/Routes.js import React from 'react'; im
阅读全文
摘要：Refs为我们提供了一种方式访问Dom节点或者React实例,下面是使用Refs的几个场景 管理焦点，文本选择或媒体播放 触发强制动画 集成第三方 DOM 库 1. 创建和访问Refs 创建Refs Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React
阅读全文
摘要：1. Render Prop 具有 render prop 的组件接受一个返回 React元素的函数，并在组件内部通过调用此函数来 实现自己的渲染逻辑, 具体来说render prop 是一个用于告知组件需要渲染什么内容的函数 prop。 <DataProvider render={data =>
阅读全文
摘要：1. 创建Redux store app/store.js import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: {} }) 2. 将store提供给React index
阅读全文
摘要：1. store enhancer Store Enhancer基本结构 Store Enhancer是一个函数，这个函数可以接受一个createStore模样的函数为参数，返回一个新的createStore函数。它的主要目的是改变和加强store的接口方法。 const doNothingEnha
阅读全文
摘要：1. 什么是Redux Redux是一个通过叫做action的事件，管理和更新应用程序状态的js库或者说是一种模式。使用Redux 可以使我们更容易地理解应用程序中的状态或者说数据何时，何地，为什么被更新，以及这种更新所 带来的行为。 2. 使用Redux的场景 应用程序中具有大量的数据状态分布在程
阅读全文
浙公网安备 33010602011771号