40行代码把Vue3的响应式集成进React做状态管理

// store.ts
import { reactive, computed, effect } from '@vue/reactivity';

export const state = reactive({
 count: 0,
});

const plusOne = computed(() => state.count + 1);

effect(() => {
 console.log('plusOne changed: ', plusOne);
});

const add = () => (state.count += 1);

export const mutations = {
 // mutation
 add,
};

export const store = {
 state,
 computed: {
 plusOne,
 },
};

export type Store = typeof store;

// Index.tsx
import { Provider, useStore } from 'rxv'
import { mutations, store, Store } from './store.ts'
function Count() {
 const countState = useStore((store: Store) => {
 const { state, computed } = store;
 const { count } = state;
 const { plusOne } = computed;

 return {
  count,
  plusOne,
 };
 });

 return (
 <Card hoverable style={{ marginBottom: 24 }}>
  <h1>计数器</h1>
  <div className="chunk">
  <div className="chunk">store中的count现在是 {countState.count}</div>
  <div className="chunk">computed值中的plusOne现在是 {countState.plusOne.value}</div>
   <Button onClick={mutations.add}>add</Button>
  </div>
 </Card>
 );
}

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

const data = reactive({ count: 0 })
effect(() => {
 // 就是这句话 访问了data.count
 // 从而收集到了依赖
 console.log(data.count)
})

data.count = 1
// 控制台打印出1

() => {
 // 就是这句话 访问了data.count
 // 从而收集到了依赖
 console.log(data.count)
}

let data = reactive(2)
// "htmlcode">

const data = ref(2)
// "color: #ff0000">实现


从这几个核心api来看，只要effect能接入到React系统中，那么其他的api都没什么问题，因为它们只是去收集effect的依赖，去通知effect触发更新。


effect接受的是一个函数，而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数，如果我们把这个schedule替换成对应组件的更新呢？要知道在hook的世界中，实现当前组件强制更新可是很简单的：


useForceUpdate


export const useForceUpdate = () => {
 const [, forceUpdate] = useReducer(s => s + 1, 0);
 return forceUpdate;
};



这是一个很经典的自定义hook，通过不断的把状态+1来强行让组件渲染。

而rxv的核心api: useStore接受的也是一个函数selector，它会让用户自己选择在组件中需要访问的数据。


那么思路就显而易见了：

  
把selector包装在effect中执行，去收集依赖。
  
指定依赖发生更新时，需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。

这样不就实现了数据变化，组件自动更新吗？

简单的看一下核心实现


useStore和Provider




import React, { useContext } from 'react';
import { useForceUpdate, useEffection } from './share';

type Selector<T, S> = (store: T) => S;

const StoreContext = React.createContext<any>(null);

const useStoreContext = () => {
 const contextValue = useContext(StoreContext);
 if (!contextValue) {
 throw new Error(
  'could not find store context value; please ensure the component is wrapped in a <Provider>',
 );
 }
 return contextValue;
};

/**
 * 在组件中读取全局状态
 * 需要通过传入的函数收集依赖
 */
export const useStore = <T, S>(selector: Selector<T, S>): S => {
 const forceUpdate = useForceUpdate();
 const store = useStoreContext();

 const effection = useEffection(() => selector(store), {
 scheduler: forceUpdate,
 lazy: true,
 });

 const value = effection();
 return value;
};

export const Provider = StoreContext.Provider;


这个option是传递给Vue3的effectapi，


scheduler规定响应式数据更新以后应该做什么操作，这里我们使用forceUpdate去让组件重新渲染。


lazy表示延迟执行，后面我们手动调用effection来执行


{
 scheduler: forceUpdate,
 lazy: true,
}



再来看下useEffection和useForceUpdate




import { useEffect, useReducer, useRef } from 'react';
import { effect, stop, ReactiveEffect } from '@vue/reactivity';

export const useEffection = (...effectArgs: Parameters<typeof effect>) => {
 // 用一个ref存储effection
 // effect函数只需要初始化执行一遍
 const effectionRef = useRef<ReactiveEffect>();
 if (!effectionRef.current) {
 effectionRef.current = effect(...effectArgs);
 }

 // 卸载组件后取消effect
 const stopEffect = () => {
 stop(effectionRef.current!);
 };
 useEffect(() => stopEffect, []);

 return effectionRef.current
};

export const useForceUpdate = () => {
 const [, forceUpdate] = useReducer(s => s + 1, 0);
 return forceUpdate;
};




也很简单，就是把传入的函数交给effect，并且在组件销毁的时候停止effect而已。


流程

  
先通过useForceUpdate在当前组件中注册一个强制更新的函数。
  
通过useContext读取用户从Provider中传入的store。
  
再通过Vue的effect去帮我们执行selector(store)，并且指定scheduler为forceUpdate，这样就完成了依赖收集。
  
那么在store里的值更新了以后，触发了scheduler也就是forceUpdate，我们的React组件就自动更新啦。

就简单的几行代码，就实现了在React中使用@vue/reactivity中的所有能力。


优点：

  
直接引入@vue/reacivity，完全使用Vue3的reactivity能力，拥有computed, effect等各种能力，并且对于Set和Map也提供了响应式的能力。后续也会随着这个库的更新变得更加完善的和强大。
  
vue-next仓库内部完整的测试用例。
  
完善的TypeScript类型支持。
  
完全复用@vue/reacivity实现超强的全局状态管理能力。
  
状态管理中组件级别的精确更新。
  
Vue3总是要学的嘛，提前学习防止失业！

缺点：
由于需要精确的收集依赖全靠useStore，所以selector函数一定要精确的访问到你关心的数据。甚至如果你需要触发数组内部某个值的更新，那你在useStore中就不能只返回这个数组本身。
举一个例子：




function Logger() {
 const logs = useStore((store: Store) => {
 return store.state.logs.map((log, idx) => (
  <p className="log" key={idx}>
  {log}
  </p>
 ));
 });

 return (
 <Card hoverable>
  <h1>控制台</h1>
  <div className="logs">{logs}</div>
 </Card>
 );
}


这段代码直接在useStore中返回了整段jsx，是因为map的过程中回去访问数组的每一项来收集依赖，只有这样才能达到响应式的目的。


源码地址:https://github.com/sl1673495/react-composition-api