我最近看到了下面的文章State Management with React Hooks — No Redux or Context API。自从开始React以来，谈论最多的问题总是状态管理和全局状态。Redux一直是流行的选择，最近是上下文API。但这种方法似乎更容易，代码更少，可伸缩性更强。
我的问题是，是否有人能看到使用这种我可能忽略了的状态管理方法的缺点，我对代码做了一些修改以支持SSR，它可以在Nextjs中工作，并且使其在使用操作和状态变量设置方面更加友好。
useGlobalState.js

import React, { useState, useEffect, useLayoutEffect } from 'react';

const effect = typeof window === 'undefined' ? useEffect : useLayoutEffect;

function setState(newState) {
    if (newState === this.state) return;
    this.state = newState;
    this.listeners.forEach((listener) => {
        listener(this.state);
    });
}

function useCustom() {
    const newListener = useState()[1];
    effect(() => {
        this.listeners.push(newListener);
        return () => {
            this.listeners = this.listeners.filter((listener) => listener !== newListener);
        };
    }, []);
    return [this.state, this.setState, this.actions];
}

function associateActions(store, actions) {
    const associatedActions = {};
    if (actions) {
        Object.keys(actions).forEach((key) => {
            if (typeof actions[key] === 'function') {
                associatedActions[key] = actions[key].bind(null, store);
            }
            if (typeof actions[key] === 'object') {
                associatedActions[key] = associateActions(store, actions[key]);
            }
        });
    }
    return associatedActions;
}

const useGlobalHook = (initialState, actions) => {
    const store = { state: initialState, listeners: [] };
    store.setState = setState.bind(store);
    store.actions = associateActions(store, actions);
    return useCustom.bind(store, React);
};

export default useGlobalHook;

然后为一个状态变量设置一个自定义钩子，可以是一个简单的字符串或者是一个对象下面是一个简单的例子：

import useGlobalState from './useGlobalState';

const initialState = 'Hi';

// Example action for complex processes setState will be passed to component for use as well
const someAction = (store, val) => store.setState(val); 

const useValue = useGlobalState(initialState, { someAction });

export default useValue;

以及在组件中的使用：

import React from 'react'
import useVal from './useVal'

export default () => {
  const [val, setVal, actions] = useVal();

  const handleClick = () => {
    setVal('New Val');
    // or use some actions
    actions.someAction('New Val');
  }

  return(
    <div>{val}</div>
    <button onClick={handleClick}>Click Me</button>
  )
}

这看起来是一种更干净、更简单的方法，我想知道为什么这不是状态管理的最佳方法。首先，你不必将所有东西都 Package 在一个提供程序中。其次，它非常容易实现，实际应用中涉及的代码也少得多。有人能看到使用这种方法的缺点吗？我唯一能想到的是上下文API的重新呈现问题，但在小块中，这不应该是一个问题。