Question

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

我应该在React中定义模型类吗？即如果我有客户类概念，那么我可以：1）将客户的属性直接定义为state/props的属性2）将客户的属性定义为state.customer/props.customer的属性； 3）分别定义一些JavaScript模板/类Customer，并简单地说state.customer/props.customer的类型为Customer，并且不要在state/props中重复属性。我觉得3）是正确的方法，不是吗？
如果（上一点的）第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 />
      </>
    )
  );

定义这些道具的位置取决于您需要的位置。如果只有一个组件需要道具，则可以在该组件状态中定义它们。但通常您需要几个部分的道具，因此lift them in your hierarchy up。这通常会导致一个非常“智能”的组件（具有较大状态的组件）。

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

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

React中的模型类？

1 个答案: