应该在哪里定义状态？

Question

这两个在React中定义状态的构造之间有什么区别？

class ProductsPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    };
  }
  ...
}

和这个：

class ProductsPage extends Component {
  state = {
    products: []
  };
  ...
}

当用ES6编码时，它们都可以很好地工作。 但是，较低的版本似乎不适用于打字稿3。我有以下几点：

interface IState {
  products: IProduct[];
}

class ProductsPage extends Component<{}, IState> {
  state = {
    products: []
  };


  public componentDidMount() {
    this.setState({ products });
  }

  public render() {
    return (
      <div className="page-container">
        <ul className="product-list">
          {this.state.products.map(p => (
            <li className="product-list-item" key={p.id}>
              {p.name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ts编译器标记了一个错误，说：“ never”类型不存在属性ID

这是为什么？

Answer 1

第二种形式是类属性 ，它是第3阶段JavaScript提议（意味着它还不是语言的一部分）。 在构造函数上添加属性是旧的ES2015方法 （称为最大最小类）。

就您而言，没有功能上的差异。

TypeScript要求您声明类字段以确保类型安全-因此发出警告。

Answer 2

如何定义React组件的状态与React本身所倡导的编码风格一样主观。 通常我会走非常严格的路线，如下所示：

type State = {
    someStateVar: number[];
};

export class MyComponent extends Component<{}, State> {
    public readonly state: State = {
        someStateVar: [],
    };

    public async componentDidMount() {
        // Dynamically fetch data (maybe via axios) and populate the new state
        const data = await axios.get<number[]>(...);
        this.setState({ someStateVar: data });
    }
}

如您所见，我确保将state显式标记为只读，只是要确保没有人尝试直接写入状态（即使如今IDE和linter都可以检查这些错误而无需采取任何预防措施）。

我宁愿不随便手动设置状态的另一个原因是，它可能会鼓励错误地处理状态。 在没有使用setState情况下，永远不要在类方法中直接为state赋值。

此外，我基本上是立即定义默认值，并在componentDidMount中用动态数据填充状态。 这种方法允许您通过删除一个显式的构造函数定义来保持代码简洁，因为无论如何您都应将此类初始化移动到componentDidMount并且如果您不首先使用类成员箭头表示法，则仅将构造函数用于绑定方法。