关于状态 | CSS-Tricks

React 在状态管理方面实际上有点特立独行。虽然它拥有像 useState 和 Context 这样的顶级工具，但您在处理响应式全局状态时更多的是自力更生。以下是 David Ceddia 关于 “React 状态管理库及其选择” 的文章，它很好地介绍了各种选择。我之所以说“特立独行”，是因为其他所有主要的 JavaScript 框架都有自己的全局状态实现。

对我来说，状态的概念对于前端开发至关重要。它就像组件一样。只是说它是处理数字产品的一种明智方式。状态是我们对网站上发生的事情的抽象。它可以是侧边栏是否打开或关闭，评论数据列表，登录用户的详细信息，或者我们需要绘制和使 UI 具有功能性的任何其他内容。

这就是为什么我仍然对原生 Web 组件完全没有尝试解决状态问题感到惊讶。我没有足够的知识来了解原因，但作为一名观察者，我可以看到开发人员正在努力寻找最佳方法，以使状态在 Web 组件中以及跨 Web 组件工作。最近，我遇到了 Evan You 的 @vue/lit。这是一个用于 Web 组件的微框架，它通过使用 lit-html 来解决模板化和重新渲染问题，然后通过 Vue 的 reactivity 来整合响应式状态。我觉得它看起来很酷。

Evan 的想法将使用的库的总大小降至约 6kb。那么我们还能降低多少呢？ Krasimir Tsonev 撰写了 “使用 JavaScript 模块系统进行状态管理”，其中他们完全没有使用库（可以说是在此过程中创建了自己的小型库）。状态管理器可以仅仅是一个我们导入并使用的模块，本质上它是一个具有值、变异函数和监听器的对象。这将状态管理的开销降到了几乎为零，代价是放弃了使用更强大的库所获得的有效重新渲染、更好的模板化和生命周期功能。

说到完全不使用任何库，以下是 Leo Bauza 的文章 “Viget 的 JavaScript 是如何工作的？”，其中他们深入介绍了他们在 HTML 基础上添加功能所使用的原生模式。看起来所有功能都是通过 data-* 属性应用的，每个数据属性都有自己的 JavaScript 模块（类）来处理该特定功能。这里似乎没有处理全局状态，但他们在模块中以相当手动的方式处理状态。

我发现所有这些东西都很迷人。在我自己的工作中，我敢说我相当典型。如果它是一个很小的东西，我可能会考虑自己动手。如果它是一个中等大小的东西，但影响力很小，我可能会尝试使用新的和花哨的——甚至可能是实验性的——方法。但一旦我要做一些大型且影响力很大的事情，我发现从最知名的库中选择更让我感到安心，即使有时这意味着要使用更重的库。 😬

随机用户

# 2021年3月24日

一定要看看 Svelte Stores。

布莱恩

# 2021年3月24日

我喜欢 SolidJS 的方法。

Quozzo

# 2021年3月25日

React 的 Context 非常通用，我用它来处理全局状态。它还有一个额外的优势，可以多次使用它来分割所有这些全局状态，将用户、主题、购物车、语言等分开。因此，每次向购物车中添加商品时，它不会无必要地重新渲染访问用户 Context 的所有组件。

马修·胡奥特

# 2021年3月25日

非常有趣！我正在选择一种方法，将动态组件实现到内容网站（静态）中。这里的链接将有助于进一步探索。我没有找到任何规定的方法来做到这一点。到目前为止，我使用的是原生 JavaScript，但对于更复杂的东西（客户区域、订阅等），我更愿意使用一个系统，我可以依靠它来构建网站的应用程序部分，而无需自己维护它。这样就不会牺牲太多性能。我还在寻找阶段。

帕特+霍尔

# 2021年3月25日

我使用 data 获取器和设置器，如下所示

class MyComponent extends HTMLComponent {
  set data(something){
    this.something = something
    this.render()
  }

  get data(){ return this.something }


  render(){
    // put this.something into this component’s HTML
  }
}

然后您选择 my-component 或其他任何东西，并执行

myComponent.data = { …some arrays and objects, usually… }

拉斯姆斯·舒尔茨

# 2021年3月25日

我再次提一下 Sinuous。我最喜欢这个库的一点是它的一致状态管理——您不需要两种不同的状态管理机制来处理组件和应用程序状态，它在所有地方都是可观察的。无需学习任何模式或在 API 之间切换——它只管工作。

首先，不必在数十个状态管理库之间进行选择，这真是令人欣慰。

迪帕克·派

# 2021年3月26日

如果您还没有使用过 xstate 库，那就错过了。

布莱恩

评论永久链接# 2021年3月27日

Xstate 太棒了。它的可视化工具也很好，可以用于调试/验证您的状态机逻辑。
迈克

评论永久链接# 2021年4月1日

React 很明确地将自己定位为一个用于创建视图的库，而不是一个框架（如 Angular）。这是它不关心应用程序状态的一个原因。你甚至可以在 Angular 应用程序中使用 React。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。