时间戳

首页 > 解决方案 > 存储复杂的 React 状态

javascript - 存储复杂的 React 状态

问题描述

我有一个需要通过实时 WebSocket 连接以及嵌套子组件访问/修改的 React 状态。

import React from "react";
import Editor from "component/Editor";

function App() {
  let fileTreeData = [
    {
      id: 1,
      type: "directory",
      name: "Test Root",
      children: [
        { id: 2, type: "file", name: "Test 2" },
        {
          id: 3,
          type: "directory",
          name: "src",
          children: [
            { id: 4, type: "file", name: "index.js" },
            { id: 5, type: "file", name: "test.js" }
          ],
          expanded: false
        },
        { id: 6, type: "file", name: "Test" }
      ],
      expanded: true
    }
  ];

  return <Editor fileTreeData={fileTreeData} />;
}

export default App;

我将如何在 React 中实现这一点？全局状态似乎是一种反模式。

标签： javascriptreactjsstatestate-managementreact-state-management

解决方案

为此，我会使用MobX。

优点：

  • 实现起来很简单。
  • 它有很好的性能。
  • 它在状态定义上很灵活。
  • 您只能将 MobX 用于一个组件，而不是全局，以及全局状态。

缺点：

  • 它正在改变数据，因此您必须遵循规则才能获得正确的状态。
  • 它非常灵活，因此您可能会误用它。

推荐阅读