社区首页 >专栏 >React-Redux 100行代码简易版探究原理。

React-Redux 100行代码简易版探究原理。

ssh_晨曦时梦见兮

发布于 2020-10-15 07:07:12

74000

代码可运行

文章被收录于专栏：前端从进阶到入院前端从进阶到入院

运行总次数：0

代码可运行

前言

各位使用 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-reduxv7 中的 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: '计数器组件重新渲染