我应该定义模型类吗？

Question

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

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

Answer 1

最基本的方法如以下代码片段所示：

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 />
      </>
    )
  );

定义这些 props 的位置取决于您需要它们的位置。如果只有一个组件需要这些 props，您可以在该组件状态中定义它们。但通常您需要多个组件中的 props，因此您将它们在层次结构中向上提升。这通常会产生一个非常“智能”的组件（具有较大状态的组件）。

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

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