React-Redux 100行代码简易版探究原理。（面试热点，React Hook + TypeScript实现）

时间 2020-01-13

标签 react redux 代码简易探究原理面试热点 hook typescript 实现栏目 React 繁體版

原文原文链接

前言

各位使用react技术栈的小伙伴都不可避免的接触过redux + react-redux的这套组合，众所周知redux是一个很是精简的库，它和react是没有作任何结合的，甚至能够在vue项目中使用。css

redux的核心状态管理实现其实就几行代码vue

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的订阅给触发一下。react

那redux的实现简单了，react-redux的实现确定就须要相对复杂，它须要考虑如何和react的渲染结合起来，如何优化性能。git

目标

本文目标是尽量简短的实现react-reduxv7中的hook用法部分Provider, useSelector, useDispatch方法。（不实现connect方法）
可能会和官方版本的一些复杂实现不同，可是保证主要的流程一致。
用TypeScript实现，而且能得到完善的类型提示。

预览

预览地址： sl1673495.github.io/tiny-react-…

性能

说到性能这个点，自从React Hook推出之后，有了useContext和useReducer这些方便的api，新的状态管理库如同雨后春笋版的冒了出来，其中的不少就是利用了Context作状态的向下传递。github

举一个最简单的状态管理的例子vuex

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共享状态。redux

可是这种模式的缺点在于Context会带来必定的性能问题，下面是React官方文档中的描述：api

想像这样一个场景，在刚刚所描述的Context状态管理模式下，咱们的全局状态中有count和message两个状态分别给经过StoreContext.Provider向下传递antd

Counter计数器组件使用了count
Chatroom聊天室组件使用了message

而在计数器组件经过Context中拿到的setState触发了count改变的时候，闭包

因为聊天室组件也利用useContext消费了用于状态管理的StoreContext，因此聊天室组件也会被强制从新渲染，这就形成了性能浪费。

虽然这种状况能够用useMemo进行优化，可是手动优化和管理依赖必然会带来必定程度的心智负担，而在不手动优化的状况下，确定没法达到上面动图中的重渲染优化。

那么react-redux做为社区知名的状态管理库，确定被不少大型项目所使用，大型项目里的状态可能分散在各个模块下，它是怎么解决上述的性能缺陷的呢？接着往下看吧。

缺陷示例

在我以前写的类vuex语法的状态管理库react-vuex-hook中，就会有这样的问题。由于它就是用了Context + useReducer的模式。

你能够直接在在线示例这里，在左侧菜单栏选择须要优化的场景，便可看到上述性能问题的重现，优化方案也已经写在文档底部。

这也是为何我以为Context + useReducer的模式更适合在小型模块之间共享状态，而不是在全局。

实现

介绍

本文的项目就上述性能场景提炼而成，由

聊天室组件，用了store中的count
计数器组件，用了store中的message
控制台组件，用来监控组件的从新渲染。

用最简短的方式实现代码，探究react-redux为何能在count发生改变的时候不让使用了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<ActionType>();
  // 同步的add
  const add = useCallback(() => dispatch({ type: 'add' }), []);

  dispatch({
    type: 'log',
    payload: '计数器组件从新渲染🚀',
  });
  return (
    <Card hoverable style={{ marginBottom: 24 }}> <h1>计数器</h1> <div className="chunk"> <div className="chunk">store中的count如今是 {count}</div> <Button onClick={add}>add</Button> </div> </Card>
  );
}

export default () => {
  return (
    <Provider store={store}> <Count /> </Provider>
  );
};

复制代码

能够看到，咱们用Provider组件里包裹了Count组件，而且把redux的store传递了下去

在子组件里，经过useDispatch能够拿到redux的dispatch，经过useSelector能够访问到store，拿到其中任意的返回值。

构建Context

利用官方api构建context，而且提供一个自定义hook: useReduxContext去访问这个context，对于忘了用Provider包裹的状况进行一些错误提示：

对于不熟悉自定义hook的小伙伴，能够看我以前写的这篇文章：
使用React Hooks + 自定义Hook封装一步一步打造一个完善的小型应用。

import React, { useContext } from 'react';
import { Store } from 'redux';

interface ContextType {
  store: Store;
}
export const Context = React.createContext<ContextType | null>(null);

export function useReduxContext() {
  const contextValue = useContext(Context);

  if (!contextValue) {
    throw new Error(
      'could not find react-redux context value; please ensure the component is wrapped in a <Provider>',
    );
  }

  return contextValue;
}
复制代码

实现Provider

import React, { FC } from 'react';
import { Store } from 'redux';
import { Context } from './Context';

interface ProviderProps {
  store: Store;
}

export const Provider: FC<ProviderProps> = ({ store, children }) => {
  return <Context.Provider value={{ store }}>{children}</Context.Provider>; }; 复制代码

实现useDispatch

这里就是简单的把dispatch返回出去，经过泛型传递让外部使用的时候能够得到类型提示。

泛型推导不熟悉的小伙伴能够看一下以前这篇：
进阶实现智能类型推导的简化版Vuex

import { useReduxContext } from './Context';
import { Dispatch, Action } from 'redux';

export function useDispatch<A extends Action>() {
  const { store } = useReduxContext();
  return store.dispatch as Dispatch<A>;
}
复制代码

实现useSelector

这里才是重点，这个api有两个参数。

selector: 定义如何从state中取值，如state => state.count
equalityFn: 定义如何判断渲染之间值是否有改变。

在性能章节也提到过，大型应用中必须作到只有本身使用的状态改变了，才去从新渲染，那么equalityFn就是判断是否渲染的关键了。

关键流程（初始化）：

根据传入的selector从redux的store中取值。
定义一个latestSelectedState保存上一次selector返回的值。
定义一个checkForceUpdate方法用来控制当状态发生改变的时候，让当前组件的强制渲染。
利用store.subscribe订阅一次redux的store，下次redux的store发生变化执行checkForceUpdate。

关键流程（更新）

当用户使用dispatch触发了redux store的变更后，store会触发checkForceUpdate方法。
checkForceUpdate中，从latestSelectedState拿到上一次selector的返回值，再利用selector(store)拿到最新的值，二者利用equalityFn进行比较。
根据比较，判断是否须要强制渲染组件。

有了这个思路，就来实现代码吧：

import { useReducer, useRef, useEffect } from 'react';
import { useReduxContext } from './Context';

type Selector<State, Selected> = (state: State) => Selected;
type EqualityFn<Selected> = (a: Selected, b: Selected) => boolean;

// 默认比较的方法
const defaultEqualityFn = <T>(a: T, b: T) => a === b;
export function useSelector<State, Selected>(
  selector: Selector<State, Selected>,
  equalityFn: EqualityFn<Selected> = defaultEqualityFn,
) {
  const { store } = useReduxContext();
  // 强制让当前组件渲染的方法。
  const [, forceRender] = useReducer(s => s + 1, 0);

  // 存储上一次selector的返回值。
  const latestSelectedState = useRef<Selected>();
  // 根据用户传入的selector，从store中拿到用户想要的值。
  const selectedState = selector(store.getState());

  // 检查是否须要强制更新
  function checkForUpdates() {
    // 从store中拿到最新的值
    const newSelectedState = selector(store.getState());

    // 若是比较相等，就啥也不作
    if (equalityFn(newSelectedState, latestSelectedState.current)) {
      return;
    }
    // 不然更新ref中保存的上一次渲染的值
    // 而后强制渲染
    latestSelectedState.current = newSelectedState;
    forceRender();
  }
  
  // 组件第一次渲染后 执行订阅store的逻辑
  useEffect(() => {
  
    // 🚀重点，去订阅redux store的变化
    // 在用户调用了dispatch后，执行checkForUpdates
    const unsubscribe = store.subscribe(checkForUpdates);
    
    // 组件被销毁后 须要调用unsubscribe中止订阅
    return unsubscribe;
  }, []);
  
  return selectedState;
}

复制代码

总结

本文涉及到的源码地址：
github.com/sl1673495/t…

原版的react-redux的实现确定比这里的简化版要复杂的多，它要考虑class组件的使用，以及更多的优化以及边界状况。

从简化版的实现入手，咱们能够更清晰的获得整个流程脉络，若是你想进一步的学习源码，也能够考虑多花点时间去看官方源码而且单步调试。