React 中如何可以实现 vue3.2 新增的 effectScope 特性呢？

effectScope 可以让不同的组件之间共享相同的依赖存活周期，即可以实现多个组件共享相同状态，并且实现所有的组件都被销毁后触发响应式状态销毁，这样优化了相同的内容重复注册，还共享了数据状态

import {ref, onScopeDispose, effectScope} from 'vue';

export function createSharedComposable(composable) {
    let subscribers = 0
    let state, scope

    const dispose = () => {
        if (scope && --subscribers <= 0) {
            scope.stop()
            state = scope = null
        }
    }

    return (...args) => {
        subscribers++
        if (!state) {
            scope = effectScope(true)
            state = scope.run(() => composable(...args))
        }
        onScopeDispose(dispose)
        return state
    }
}

export let useShareMouse = createSharedComposable(useMouse)

export function useMouse() {
    const x = ref(0)
    const y = ref(0)

    function handler(e) {
        x.value = e.x
        y.value = e.y
    }

    window.addEventListener('mousemove', handler)

    onScopeDispose(() => {
        console.log('onUnmounted')
        window.removeEventListener('mousemove', handler)
    })

    return {x, y}
}