反应类组件的反模式【初学者指南】

在使用React进行开发时，理解特定方法可能引起问题是很重要的。
这些被称为“反模式”的方法显示出了应该避免的实践。
这次我们将介绍与React类组件相关的一些反模式。

有不需要的状态

在React的类组件中，应该避免将可以直接从props中获取的值作为状态进行保持。状态通常用于表示随着时间的推移而发生变化的数据。

反模式。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name,
    };
  }

  //...
}

2. 直接更改状态。

在React中，应该通过this.setState()方法间接地修改状态。这样做能够让React跟踪状态的变化并进行重新渲染。

反面模式。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount() {
    this.state.count += 1; // 間違い！
  }

  //...
}

3. 生命周期方法的错误使用

生命周期方法是在特定的时间点执行的，但如果不理解它们各自的特性而使用它们，可能会引起意想不到的问题。例如，在componentDidUpdate中更新状态可能会导致无限循环。

反模式

class MyComponent extends React.Component {
  //...

  componentDidUpdate() {
    this.setState({ count: this.state.count + 1 }); // 間違い！
  }

  //...
}

总结

这些反模式指出了在使用React类组件时应该避免的一些要点。通过理解这些要点并采用适当的模式，可以编写出较少bug、易于维护的代码。