Question

在阅读带有打字稿的React模式时，我看到两种常见的方法来定义React组件的“状态”：

方法1。

interface IMyState {
  field: string;
}

class Class1 extends React.Component<object, IMyState> {
  public state: Readonly<IMyState> = {
    field: ""
  }
  // class methods...
}

方法2。

const initialState = { field: "" }
type State = Readonly<typeof initialState>

class Class2 extends React.Component<object, State> {
  // class methods...
}

两种方法都可以，但是我不清楚两种模式之间是否存在功能差异。我的猜测是方法2使使用您的类组件的人很难重新定义状态，但是由于推断和未定义状态的状态，读者似乎也不太清楚。是否存在方法2允许您执行方法1不允许执行的操作的情况？

Answer 1

有些人会告诉你，第二种解决方案之类的方法更好。

type State = typeof initialState;
const initialState = Object.freeze({field: ""});
class Class2 extends Component<object, State> {
  readonly state = initialState
}

为什么？

类型信息始终与实现同步，因为真理的来源只是一件事=>实现
更少类型的样板
更具可读性（可以辩论）
通过添加只读修饰符并冻结对象，组件内的任何突变都将立即以编译错误结束，这将防止任何运行时错误。

但是其他人当然会出于其他一些好的理由而与您联系。

我的答案是此博客帖子10++ TypeScript Pro tips/patterns with (or without) React的摘录

TypeScript / React：在类外部或内部定义状态

1 个答案: