如何为 Immutable.js 对象编写 TypeScript 接口？

Question

假设我们有以下接口User：

interface User {
  id: number;
  name: string;
  bag: Item[];
}

我现在可以定义一个 React 组件：

interface UserComponentProps {
  user: User;
}
interface UserComponentState {}

class UserComponent extends React.Component<UserComponentProps, UserComponentState> {

这很好，因为现在我可以在组件中进行类型检查，但是有一个问题：用户不是不可变的，因此很难阻止 UserComponent 在用户未更改时呈现。

但如果我将用户存储为不可变对象，我的组件将如下所示：

interface UserComponentProps {
  user: Immutable.Map<string, any>;
}
interface UserComponentState {}

class UserComponent extends React.Component<UserComponentProps, UserComponentState> {

如何为此类对象定义接口？

Answer 1

如果props 发生更改，React 的组件将重新渲染，因此答案很大程度上取决于您如何创建 props 进行渲染。

一个简单的例子会给你一个想法：

const bag = Immutable.List([{name:"bagItem1"}]);
console.log(bag.toJS() === bag.toJS())

<script src="https://facebook.github.io/immutable-js/immutable.js"></script>

这是什么意思？这意味着，如果您将 Item[] 存储为 Immutable，然后将 UserComponent 渲染为：

<UserComponent
   id={1}
   name={"some name"}
   bag={store.getIn(["bag", "items"]).toJS()}
   />

然后在每次存储突变时，即使包从未更改，UserComponent 也会收到bag 的新对象并强制重新渲染。

对于plain反对的道具，你可以考虑使用React.PureComponent，它会为你做浅比较，但如果你需要传递对象数组，那么你通常有两种解决方案：

1. 为您实现shallComponentUpdate 方法Component，您可以在其中手动比较prevProps 与nextProps，并返回boolean，表示是否应重新渲染Component

2. 不要将Immutable 用于存储。完全！我的公司已经做到了，我们从不后悔。 （你也节省了 150kb :)）

要替换 Immutable，您必须学习正确构建和变异存储的视图实践。有很多good articles