React Context Api 与本地存储

Question

我有一些关于上下文 API 和本地存储的一般性问题困扰着我。

何时使用本地存储？何时使用 Context API，何时使用两者？

我知道要在刷新后保留数据，我需要诸如本地存储或会话存储之类的东西，那么我是否完全放弃了上下文 API 并将所有内容存储在本地存储中？这样我不仅可以存储数据还可以保持刷新？一些见解将非常有帮助。

有什么优点和缺点？

Answer 1

上下文 API 与本地存储是苹果与橘子的比较。

Context API用于在组件树中共享状态。

Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递 props。

本地存储用于在会话之间存储数据。

只读的 localStorage 属性允许您访问文档来源的 Storage 对象；存储的数据跨浏览器会话保存。

正确的比较可能是 Local Storage vs Cookies、Context API vs State-Management Library（不是真的，因为Context 不是状态管理工具）。

虽然您可以将所有内容存储在本地存储上（尽管它不可​​扩展和可维护），但它没有用处。

它没有用，因为您无法在状态更改时通知您的组件，您需要为此使用任何 React 的 API。

通常本地存储用于会话功能，例如保存用户设置、最喜欢的主题、身份验证令牌等。

通常，您在应用程序启动时从本地存储读取一次，并使用自定义钩子在相关数据更改时更新其键。

这是useLocalStorage自定义挂钩的有用收据：

function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = value => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}