1. 首页

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

前言

各位使用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, }; } // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

它就是利用闭包管理了state等变量,然后在dispatch的时候通过用户定义reducer拿到新状态赋值给state,再把外部通过subscribe的订阅给触发一下。

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

目标

  1. 本文目标是尽可能简短的实现react-reduxv7中的hook用法部分Provider, useSelector, useDispatch方法。(不实现connect方法)
  2. 可能会和官方版本的一些复杂实现不一样,但是保证主要的流程一致。
  3. 用TypeScript实现,并且能获得完善的类型提示。

预览

redux gif.gif

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

性能

说到性能这个点,自从React Hook推出以后,有了useContextuseReducer这些方便的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>; } // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

利用useState或者useContext,可以很轻松的在所有组件之间通过Context共享状态。

但是这种模式的缺点在于Context会带来一定的性能问题,下面是React官方文档中的描述:

Context性能问题

想像这样一个场景,在刚刚所描述的Context状态管理模式下,我们的全局状态中有countmessage两个状态分别给通过StoreContext.Provider向下传递

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

而在计数器组件通过Context中拿到的setState触发了count改变的时候,

由于聊天室组件也利用useContext消费了用于状态管理的StoreContext,所以聊天室组件也会被强制重新渲染,这就造成了性能浪费。

虽然这种情况可以用useMemo进行优化,但是手动优化和管理依赖必然会带来一定程度的心智负担,而在不手动优化的情况下,肯定无法达到上面动图中的重渲染优化。

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

缺陷示例

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

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

这也是为什么我觉得Context + useReducer的模式更适合在小型模块之间共享状态,而不是在全局。

使用

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

  1. 聊天室组件,用了store中的count
  2. 计数器组件,用了store中的message
  3. 控制台组件,用来监控组件的重新渲染。

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); // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

在组件中使用


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> ); }; // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

可以看到,我们用Provider组件里包裹了Count组件,并且把redux的store传递了下去

在子组件里,通过useDispatch可以拿到redux的dispatch, 通过useSelector可以访问到store,拿到其中任意的返回值。

实现

用最简短的方式实现代码,探究react-redux为什么能在count发生改变的时候不让使用了message的组件重新渲染。

实现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; } // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

实现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>; }; // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

实现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>; } // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

实现useSelector

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

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

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

关键流程(初始化):

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

关键流程(更新)

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

有了这个思路,就来实现代码吧:


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; } // Js中文网 前端进阶资源教程 https://www.javascriptc.com/

总结

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

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

从简化版的实现入手,我们可以更清晰的得到整个流程脉络,如果你想进一步的学习源码,也可以考虑多花点时间去看官方源码并且单步调试。

作者:晨曦时梦见兮
链接:https://juejin.im/post/5e1995a66fb9a02fdc3a44b4

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React-Redux 100行代码简易版探究原理。(面试热点,React Hook + TypeScript实现)

链接:https://www.javascriptc.com/3799.html

« 全链路压测在大搜车的探索与实践
华为硬杠谷歌,开发者“夹缝求生”»
Flutter 中文教程资源

相关推荐

QR code