文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

「React18新特性」深度解读之UseMutableSource

2024-12-02 18:21

关注

useMutableSource 最早的 RFC 提案在 2020年 2 月份就开始了。在 React 18 中它将作为新特性出现。用一段提案中的描述来概括 useMutableSource。

useMutableSource 能够让 React 组件在 Concurrent Mode 模式下安全地有效地读取外接数据源,在组件渲染过程中能够检测到变化,并且在数据源发生变化的时候,能够调度更新。

说起外部数据源就要从 state 和更新说起 ,无论是 React 还是 Vue 这种传统 UI 框架中,虽然它们都采用虚拟 DOM 方式,但是还是不能够把更新单元委托到虚拟 DOM 身上来,所以更新的最小粒度还是在组件层面上,由组件统一管理数据 state,并参与调度更新。

回到我们的主角 React 上,既然由组件 component 管控着状态 state。那么在 v17 和之前的版本,React 想要视图上的更新,那么只能通过更改内部数据 state 。纵览 React 的几种更新方式,无一离不开自身 state 。先来看一下 React 的几种更新模式。

从上面可以概括出:state和视图更新的关系 Model => View 。但是 state 仅限于组件内部的数据,如果 state 来源于外部(脱离组件层面)。那么如何完成外部数据源转换成内部状态, 并且数据源变化,组件重新 render 呢?

常规模式下,先把外部数据 external Data 通过 selector 选择器把组件需要的数据映射到 state | props 上。这算是完成了一步,接下来还需要 subscribe 订阅外部数据源的变化,如果发生变化,那么还需要自身去强制更新 forceUpdate 。下面两幅图表示数据注入和数据订阅更新。

典型的外部数据源就是 redux 中的 store ,redux 是如何把 Store 中的 state ,安全的变成组件的 state 的。

或许我可以用一段代码来表示从 react-redux 中 state 改变到视图更新的流程。

  1. const store = createStore(reducer,initState) 
  2.  
  3. function App({ selector }){ 
  4.     const [ state , setReduxState ] = React.useState({}) 
  5.     const contextValue = useMemo(()=>{ 
  6.          
  7.         store.subscribe(()=>{ 
  8.               
  9.              const value = selector(data.getState()) 
  10.               
  11.              if(ifHasChange(state,value)){ 
  12.                  setReduxState(value) 
  13.              } 
  14.         }) 
  15.     },[ store ])     
  16.     return 
    ...
     

但是例子中代码,没有实际意义,也不是源代码,我这里就是让大家清晰地了解流程。redux 和 react 本质上是这样工作的。

如上是没有 useMutableSource 的情况,现在用 useMutableSource 不在需要把订阅到更新流程交给组件处理。如下:

  1.  
  2. const store = createStore(reducer,initState) 
  3.  
  4. const externalDataSource = createMutableSource( store ,store.getState() ) 
  5.  
  6. const subscribe = (store, callback) => store.subscribe(callback); 
  7. function App({ selector }){ 
  8.      
  9.     const state = useMutableSource(externalDataSource,selector,subscribe) 

通过 createMutableSource 创建外部数据源,通过 useMutableSource 来使用外部数据源。外部数据源变化,组件自动渲染。

如上是通过 useMutableSource 实现的订阅更新,这样减少了 APP 内部组件代码,代码健壮性提升,一定程度上也降低了耦合。接下来让我们全方面认识一下这个 V18 的新特性。

二 功能介绍

具体功能介绍流程还是参考最新的 RFC, createMutableSource 和 useMutableSource 在一定的程度上,有点像 createContext 和 useContext ,见名知意,就是创建与使用。不同的是 context 需要 Provider 去注入内部状态,而今天的主角是注入外部状态。那么首先应该看一下两者如何使用。

创建

createMutableSource 创建一个数据源。它有两个参数:

  1. const externalDataSource = createMutableSource( store ,store.getState() )  

第一个参数:就是外部的数据源,比如 redux 中的 store,

第二个参数:一个函数,函数的返回值作为数据源的版本号,这里需要注意??的是,要保持数据源和数据版本号的一致性,就是数据源变化了,那么数据版本号就要变化,一定程度上遵循 immutable 原则(不可变性)。可以理解为数据版本号是证明数据源唯一性的标示。

api介绍

useMutableSource 可以使用非传统的数据源。它的功能和 Context API 还有 useSubscription 类似。(没有使用过 useSubscription 的同学,可以了解一下 )。

先来看一下 useMutableSource 的基本使用:

  1. const value = useMutableSource(source,getSnapShot,subscribe) 

useMutableSource 是一个 hooks ,它有三个参数:

useMutableSource 特点

useMutableSource 和 useSubscription 功能类似:

除此之外 useMutableSource 还有一些特点:

关于 MutableSource 版本号

确保数据源和版本号的一致性。

设计规范

当通过 getSnapshot 读取外部数据源的时候,返回的 value 应该是不可变的。

数据源必须有一个全局的版本号,这个版本号代表整个数据源:

接下来参考 github 上的例子,我讲一下具体怎么使用:

例子一

例子一:订阅 history 模式下路由变化

比如有一个场景就是在非人为情况下,订阅路由变化,展示对应的 location.pathname,看一下是如何使用 useMutableSource 处理的。在这种场景下,外部数据源就是 location 信息。

  1. // 通过 createMutableSource 创建一个外部数据源。 
  2. // 数据源对象为 window。 
  3. // 用 location.href 作为数据源的版本号,href 发生变化,那么说明数据源发生变化。 
  4. const locationSource = createMutableSource( 
  5.   window, 
  6.   () => window.location.href 
  7. ); 
  8.  
  9. // 获取快照信息,这里获取的是 location.pathname 字段,这个是可以复用的,当路由发生变化的时候,那么会调用快照函数,来形成新的快照信息。 
  10. const getSnapshot = window => window.location.pathname 
  11.  
  12. // 订阅函数。 
  13. const subscribe = (window, callback) => { 
  14.    //通过 popstate 监听 history 模式下的路由变化,路由变化的时候,执行快照函数,得到新的快照信息。 
  15.   window.addEventListener("popstate", callback); 
  16.    //取消监听 
  17.   return () => window.removeEventListener("popstate", callback); 
  18. }; 
  19.  
  20. function Example() { 
  21.   // 通过 useMutableSource,把数据源对象,快照函数,订阅函数传入,形成 pathName。   
  22.   const pathName = useMutableSource(locationSource, getSnapshot, subscribe); 
  23.  
  24.   // ... 

来描绘一下流程:

例子二

例子二:redux 中 useMutableSource 使用

redux 可以通过 useMutableSource 编写自定义 hooks —— useSelector,useSelector 可以读取数据源的状态,当数据源改变的时候,重新执行快照获取状态,做到订阅更新。我们看一下 useSelector 是如何实现的。

  1. const mutableSource = createMutableSource( 
  2.   reduxStore, // 将 redux 的 store 作为数据源。 
  3.   // state 是不可变的,可以作为数据源的版本号 
  4.   () => reduxStore.getState() 
  5. ); 
  6.  
  7. // 通过创建 context 保存数据源 mutableSource。 
  8. const MutableSourceContext = createContext(mutableSource); 
  9.  
  10. // 订阅 store 变化。store 变化,执行 getSnapshot 
  11. const subscribe = (store, callback) => store.subscribe(callback); 
  12.  
  13. // 自定义 hooks useSelector 可以在每一个 connect 内部使用,通过 useContext 获取 数据源对象。  
  14. function useSelector(selector) { 
  15.   const mutableSource = useContext(MutableSourceContext); 
  16.    // 用 useCallback 让 getSnapshot 变成有记忆的。  
  17.   const getSnapshot = useCallback(store => selector(store.getState()), [ 
  18.     selector 
  19.   ]); 
  20.    // 最后本质上用的是 useMutableSource 订阅 state 变化。   
  21.   return useMutableSource(mutableSource, getSnapshot, subscribe); 

大致流程是这样的:

注意问题

在创建 getSnapshot 的时候,需要将 getSnapshot 记忆化处理,就像上述流程中的 useCallback 处理 getSnapshot 一样,如果不记忆处理,那么会让组件频繁渲染。

在最新的 react-redux 源码中,已经使用新的 api,订阅外部数据源,不过不是 useMutableSource 而是 useSyncExternalStore,具体因为 useMutableSource 没有提供内置的 selectorAPI,需要每一次当选择器变化时候重新订阅 store,如果没有 useCallback 等 api 记忆化处理,那么将重新订阅。具体内容请参考 useMutableSource → useSyncExternalStore。

三 实践

接下来我用一个例子来具体实践一下 createMutableSource,让大家更清晰流程。

这里还是采用 redux 和 createMutableSource 实现外部数据源的引用。这里使用的是 18.0.0-alpha 版本的 react 和 react-dom 。

  1. import  React , { 
  2.     unstable_useMutableSource as useMutableSource, 
  3.     unstable_createMutableSource as createMutableSource 
  4. from 'react' 
  5.  
  6. import { combineReducers , createStore  } from 'redux' 
  7.  
  8.  
  9. function numberReducer(state=1,action){ 
  10.     switch (action.type){ 
  11.       case 'ADD'
  12.         return state + 1 
  13.       case 'DEL'
  14.         return state - 1 
  15.       default
  16.         return state 
  17.     } 
  18.  
  19. const rootReducer = combineReducers({ number:numberReducer  }) 
  20.  
  21. const Store = createStore(rootReducer,{ number: 1  }) 
  22.  
  23. const dataSource = createMutableSource( Store ,() => 1 ) 
  24.  
  25.  
  26. const subscribe = (dataSource,callback)=>{ 
  27.     const unSubScribe = dataSource.subscribe(callback) 
  28.     return () => unSubScribe() 
  29.  
  30.  
  31. export default function Index(){ 
  32.      
  33.      const shotSnop = React.useCallback((data) => ({...data.getState()}),[]) 
  34.      
  35.     const data = useMutableSource(dataSource,shotSnop,subscribe) 
  36.     return 
     
  37.         

     拥抱 React 18 🎉🎉🎉 

     
  38.         赞:{data.number} 
     
  39.         Store.dispatch({ type:'ADD' })} >点赞 
  40.     
 
  • 第一部分用 combineReducers 和 createStore 创建 redux Store 的过程。

    重点是第二部分:

    接下来让我们看一下效果:

    四 原理分析

    useMutableSource 已经在 React v18 的规划之中了,那么它的实现原理以及细节,在 V18 正式推出之前可以还会有调整,

    1 createMutableSource

    react/src/ReactMutableSource.js -> createMutableSource

    1. function createMutableSource(source,getVersion){ 
    2.     const mutableSource = { 
    3.         _getVersion: getVersion, 
    4.         _source: source, 
    5.         _workInProgressVersionPrimary: null
    6.         _workInProgressVersionSecondary: null
    7.     }; 
    8.     return mutableSource 

    createMutableSource 的原理非常简单,和 createContext , createRef 类似, 就是创建一个 createMutableSource 对象,

    2 useMutableSource

    对于 useMutableSource 原理也没有那么玄乎,原来是由开发者自己把外部数据源注入到 state 中,然后写订阅函数。useMutableSource 的原理就是把开发者该做的事,自己做了??????,这样省着开发者去写相关的代码了。本质上就是 useState + useEffect :

    然后来看一下原理。

    react-reconciler/src/ReactFiberHooks.new.js -> useMutableSource

    1. function useMutableSource(hook,source,getSnapshot){ 
    2.      
    3.     const getVersion = source._getVersion; 
    4.     const version = getVersion(source._source); 
    5.      
    6.     let [currentSnapshot, setSnapshot] = dispatcher.useState(() => 
    7.        readFromUnsubscribedMutableSource(root, source, getSnapshot), 
    8.     ); 
    9.     dispatcher.useEffect(() => { 
    10.          
    11.         const handleChange = () => { 
    12.              
    13.             setSnapshot() 
    14.         } 
    15.          
    16.         const unsubscribe = subscribe(source._source, handleChange); 
    17.          
    18.         return unsubscribe; 
    19.     },[source, subscribe]) 

    上述代码中保留了最核心的逻辑:

    五 总结

    今天讲了 useMutableSource 的背景,用法,以及原理。希望阅读的同学可以克隆一下 React v18 的新版本,尝试一下新特性,将对理解 useMutableSource 很有帮助。下一章我们将继续围绕 React v18 展开。

    参考文档

    useMutableSource RFC

     

    来源: 前端Sharing内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯