React-Redux 100行代码简易版探究原理。
前言
各位使用 react 技术栈的小伙伴都不可避免的接触过redux
+ react-redux
的这套组合,众所周知 redux 是一个非常精简的库,它和 react 是没有做任何结合的,甚至可以在 vue 项目中使用。
redux 的核心状态管理实现其实就几行代码
function createStore(reducer) {
let currentState
let subscribers = []
function dispatch(action) {
currentState = reducer(currentState, action);
subscribers.forEach(s => s())
}
function getState() {
return currentState;
}
function subscribe(subscriber) {
subscribers.push(subscriber)
return function unsubscribe() {
...
}
}
dispatch({ type: 'INIT' });
return {
dispatch,
getState,
};
}
复制代码
它就是利用闭包管理了 state 等变量,然后在 dispatch 的时候通过用户定义 reducer 拿到新状态赋值给 state,再把外部通过 subscribe 的订阅给触发一下。
那 redux 的实现简单了,react-redux 的实现肯定就需要相对复杂,它需要考虑如何和 react 的渲染结合起来,如何优化性能。
目标
- 本文目标是尽可能简短的实现
react-redux
v7 中的 hook 用法部分Provider
,useSelector
,useDispatch
方法。(不实现connect
方法) - 可能会和官方版本的一些复杂实现不一样,但是保证主要的流程一致。
- 用 TypeScript 实现,并且能获得完善的类型提示。
预览
预览地址:sl1673495.github.io/tiny-react-…
性能
说到性能这个点,自从 React Hook 推出以后,有了useContext
和useReducer
这些方便的 api,新的状态管理库如同雨后春笋版的冒了出来,其中的很多就是利用了Context
做状态的向下传递。
举一个最简单的状态管理的例子
export const StoreContext = React.createContext();
function App({ children }) {
const [state, setState] = useState({});
return (
<StoreContext.Provider value={{ state, setState }}>
{children}
StoreContext.Provider>
);
}
function Son() {
const { state } = useContext(StoreContext);
return <div>state是{state.xxx}div>;
}
复制代码
利用 useState 或者 useContext,可以很轻松的在所有组件之间通过 Context 共享状态。
但是这种模式的缺点在于 Context 会带来一定的性能问题,下面是 React 官方文档中的描述:
想像这样一个场景,在刚刚所描述的 Context 状态管理模式下,我们的全局状态中有count
和message
两个状态分别给通过StoreContext.Provider
向下传递
-
Counter
计数器组件使用了count
-
Chatroom
聊天室组件使用了message
而在计数器组件通过 Context 中拿到的 setState 触发了count
改变的时候,
由于聊天室组件也利用useContext
消费了用于状态管理的 StoreContext,所以聊天室组件也会被强制重新渲染,这就造成了性能浪费。
虽然这种情况可以用useMemo
进行优化,但是手动优化和管理依赖必然会带来一定程度的心智负担,而在不手动优化的情况下,肯定无法达到上面动图中的重渲染优化。
那么react-redux
作为社区知名的状态管理库,肯定被很多大型项目所使用,大型项目里的状态可能分散在各个模块下,它是怎么解决上述的性能缺陷的呢?接着往下看吧。
缺陷示例
在我之前写的类 vuex 语法的状态管理库react-vuex-hook中,就会有这样的问题。因为它就是用了Context
+ useReducer
的模式。
你可以直接在 在线示例 这里,在左侧菜单栏选择需要优化的场景
,即可看到上述性能问题的重现,优化方案也已经写在文档底部。
这也是为什么我觉得Context
+ useReducer
的模式更适合在小型模块之间共享状态,而不是在全局。
使用
本文的项目就上述性能场景提炼而成,由
-
聊天室
组件,用了 store 中的count
-
计数器
组件,用了 store 中的message
-
控制台
组件,用来监控组件的重新渲染。
redux 的定义
redux 的使用很传统,跟着官方文档对于 TypeScript 的指导走起来,并且把类型定义和 store 都 export 出去。
import { createStore } from 'redux';
type AddAction = {
type: 'add';
};
type ChatAction = {
type: 'chat';
payload: string;
};
type LogAction = {
type: 'log';
payload: string;
};
const initState = {
message: 'Hello',
logs: [] as string[],
};
export type ActionType = AddAction | ChatAction | LogAction;
export type State = typeof initState;
function reducer(state: State, action: ActionType): State {
switch (action.type) {
case 'add':
return {
...state,
count: state.count + 1,
};
case 'chat':
return {
...state,
message: action.payload,
};
case 'log':
return {
...state,
logs: [action.payload, ...state.logs],
};
default:
return initState;
}
}
export const store = createStore(reducer);
复制代码
在组件中使用
import React, { useState, useCallback } from 'react';
import { Card, Button, Input } from 'antd';
import { Provider, useSelector, useDispatch } from '../src';
import { store, State, ActionType } from './store';
import './index.css';
import 'antd/dist/antd.css';
function Count() {
const count = useSelector((state: State) => state.count);
const dispatch = useDispatch();
// 同步的add
const add = useCallback(() => dispatch({ type: 'add' }), []);
dispatch({
type: 'log',
payload: '计数器组件重新渲染
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 视频上云网关平台EasyCVR登录页开发控制台报net::ERR_CONNECTION_TIMED_OUT错误
- 视频监控系统视频上云解决方案EasyCVR集成海康EHome私有协议系列——开启存储服务
- 设计模式~责任链模式
- 大数据计算的基石——MapReduce
- SPA单页应用的优缺点
- 《JavaScript 模式》读书笔记(7)— 设计模式1
- CenterNet测试推理过程
- Docker学习笔记[nginx]
- MySQL集群搭建方案(PXC)
- Java8——行为参数化传递代码
- 【设计模式系列(二)】彻底搞懂单例模式
- 【设计模式系列(一)】彻底搞懂工厂模式
- 深入理解Arrays.sort()底层实现
- 这500多个字段引起的问题,大部分DBA都搞不定
- Java连接Mongodb工具类