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

[SystemLight]

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}
}

[SystemLight]

突然想到可以用高阶组件配合 context 可以实现，[code]( https://github.com/SystemLight/create-kiva/blob/master/packages/react-kiva/template/kiva/model/index.tsx)，但是需要操作上层组件，但是 vue 中不需要操作上层组件就可以实现，根本问题可能是 react hook 无法存在分支，也不能主动触发内部声明周期

[mxT52CRuqR6o5]

只要放弃官方的 hooks 就能在 react 中实现类似 effectScope 的东西（比如 mobx ）

[serco]

React 实现这种要方便的话基本都是靠生态里的工具，hook 只负责共享代码，加上 jotai 或者 recoil 就可以了。context 太麻烦了。