我应该定义模型类吗？

Posted 2023-02-22

【中文标题】我应该定义模型类吗？

【英文标题】：Should I define model classes?

【发布时间】：2019-10-30 13:04:12

【问题描述】：

React 使用 Flux 架构，在 https://reactjs.org/docs/thinking-in-react.html 中说 React 有两个模型 - state 和 props。还有一些关于 React https://reactjs.org/community/model-management.html 中模型管理的建议——但所有这些似乎都增加了一些额外的层来增强 Flux。我正在寻求答案的主要问题是：

我应该在 React 中定义模型类吗？ IE。如果我有Customer类的概念，那么我可以：1）直接将Customer的属性定义为state/props的属性2）将Customer的属性定义为state.customer/props.customer的属性； 3) 分别定义一些 javascript 模板/类Customer，简单地说，state.customer/props.customer 的类型为Customer，并且不要在state/props 中重复属性。我觉得 3) 是正确的方法，不是吗？ 如果（上一点的）第 3 个选项是正确的方法，那么如何定义 Customer 模板以及如何定义 state.customer/props.customer 属于该模板？我可以在一些序列化、一些模型验证任务中使用这些模板，也可以在 ReactNative 项目中使用。

【问题讨论】：

对此没有任何规定，React 完全专注于 UI - 如何管理应用状态完全取决于您。

如果您潜心研究并开始制作一些东西，您将了解如何为您的项目构建数据。

@James，你能给我举一些例子吗？ React 似乎并不完全专注于 UI。如果它做到了，它的文档和示例不会全部显示将模型存储在反应状态。

@gman 虽然 React 具有保持相对于视图的状态的机制，但它对如何管理应用程序状态并没有强烈的意见。归根结底，它是一个 UI 框架，并且有一些，所以如果您选择通过将应用程序状态保存在视图中或使用 Context 来耦合您的应用程序状态，那么这是您做出的设计决策，而不是 React 强制在你身上。

@James，所有 React 文档都使用 React 的状态、上下文等。如果它们是单独的关注点，那么它们将是单独的库。一个 UI 库和一个单独的状态库。显然 React 并不仅仅关注 UI。如果这样做，状态部分将不存在。如何将两者分开的例子会更有用的模棱两可的陈述“它是可能的”

【参考方案1】：

最基本的方式如下sn-p所示：

const Customer = ( name, age ) => (
  <div>
    <p>Name: name</p>
    <p>Age: age</p>
  </div>
);

const App = () =>
  [ name: "Bert", age: 22 ,  name: "Alfons", age: 45 ].map(
    ( name, age , i) => (
      <>
        <Customer key=i name=name age=age />
        <hr />
      </>
    )
  );

您在哪里定义这些道具取决于您在哪里需要它们。如果只有一个组件需要道具，则在该组件状态下定义它们。但通常你需要几个组件中的道具，所以你lift them in your hierarchy up。这通常会产生一个非常“智能”的组件（具有大状态的组件）。

如果您的应用变得庞大且令人困惑，我建议您将状态存储在外部。为此，您可以使用react context。它允许您将 props 注入到需要它的组件中，而不是在层次结构中向下传递几层。

如果您不想编写自己的上下文，可以使用redux 或mobx 等状态管理解决方案。它们也使用上下文，但提供了方便的函数来轻松地将组件连接到您的外部状态。