javascript - 如何在没有提供者的情况下使用上下文更新每个 React 组件？

Question

鉴于这个简单的自定义钩子

import React, { createContext, useContext } from 'react';


const context = {
   __prefs: JSON.parse(localStorage.getItem('localPreferences') || null) || {} ,
   get(key, defaultValue = null) {
      return this.__prefs[key] || defaultValue;
   },
   set(key, value) {
      this.__prefs[key] = value;
      localStorage.setItem('localPreferences', JSON.stringify(this.__prefs))
   }
};

const LocalPreferenceContext = createContext(context);

export const useLocalPreferences = () => useContext(LocalPreferenceContext);

export const withLocalPreferences = Component => () => <Component localPreferences={ useLocalPreferences() } />;

当我使用其中任何一个时，调用set上下文不会更新任何内容。当然，React 怎么知道我已经更新了任何东西？但是可以做些什么来使它工作（不包括使用提供者）？

** 编辑 **

好的，那么除了使用useContextthen 之外还有什么替代方法？这才是真正的问题，真的；如何使用这个钩子（或 HOC）更新组件？是useState唯一的方法吗？如何？使用一些事件发射器？

标签： javascriptreactjsreact-hooksreact-hoc

Answer 1

我认为在这里使用上下文确实有意义，但是您将需要使用提供程序，因为这是上下文工作方式的核心部分。渲染提供者使树下的组件可以使用一个值，而使用新值渲染是促使消费者重新渲染的原因。如果没有提供者，您至少可以访问默认值（这是您在代码中拥有的），但默认值永远不会改变，所以 react 没有什么可以通知消费者。

因此，我的建议是添加一个包含提供程序的组件，该提供程序管理与本地存储的交互。就像是：

const LocalPreferenceProvider = () => {
  const [prefs, setPrefs] = useState(
    () => JSON.parse(localStorage.getItem("localPreferences") || null) || {}
  );

  // Memoized so that it we don't create a new object every time that
  //   LocalPreferenceProvider renders, which would cause consumers to
  //   rerender too.
  const providedValue = useMemo(() => {
    return {
      get(key, defaultValue = null) {
        return prefs[key] || defaultValue;
      },
      set(key, value) {
        setPrefs((prev) => {
          const newPrefs = {
            ...prev,
            [key]: value,
          };
          localStorage.setItem("localPreferences", JSON.stringify(newPrefs));
          return newPrefs;
        });
      },
    };
  }, [prefs]);

  return (
    <LocalPreferenceContext.Provider value={providedValue}>
      {children}
    </LocalPreferenceContext.Provider>
  );
};

您在评论中提到您希望避免使用大量嵌套组件，并且您已经拥有大量提供程序。随着应用程序规模的扩大，这种情况经常会发生。就个人而言，我对此的解决方案是将提供程序提取到他们自己的组件中，然后在我的主要组件中使用该组件（类似于<AllTheProviders>{children}</AllTheProviders>）。诚然，这只是一个“看不见，心不在焉”的解决方案，但这就是我真正关心的这个案例。

如果您确实想完全摆脱使用提供程序，那么您也需要摆脱使用上下文。可以设置一个也是事件发射器的全局对象，然后让任何想要访问该对象的组件订阅事件。

以下代码不完整，但可能是这样的：

const subscribers = [];
let value = 'default';
const globalObject = {
  subscribe: (listener) => {
    // add the listener to an array
    subscribers.push(listener);
    
    // TODO: return an unsubscribe function which removes them from the array
  },
  set: (newValue) {
    value = newValue;
    this.subscribers.forEach(subscriber => {
      subscriber(value);
    });
  },
  get: () => value
}

export const useLocalPreferences = () => {
  let [value, setValue] = useState(globalObject.get);
  useEffect(() => {
    const unsubscribe = globalObject.subscribe(setValue);
    return unsubscribe;
  }, []);
  return [value, globalObject.set];
})

如果你不想自己实现它，你可以引入一个 pub/sub 库，或者如果这变成了一个项目的大部分，你可以使用现有的全局状态管理库，如 Redux 或 MobX