javascript - 如何解决实际需要 componentWillMount 的用例？

Question

React 将放弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 生命周期钩子(Hook)。更多详细信息，请参阅 Update on Async Rendering文章。

我对从这些方法迁移有疑问。这是一个例子:

目前，我使用 nprogress用于在页面顶部显示进度条。它是这样使用的:

export default class Page extends React.Component {
  componentWillMount() {
    Nprogress.start();
  }

  componentDidMount() {
    Nprogress.done();
  }

  render() {
    return (
      <h1>Hello, world!</h1>
    )
  }
}

在上面的例子中，我在组件挂载前开始显示进度条，并在组件挂载后结束。

如何迁移到新的 React 生命周期并让我的组件按预期工作？

Answer 1

使用构造函数:

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    Nprogress.start();
  }

  componentDidMount() {
    Nprogress.done();
  }

  render() {
    return (
      <h1>Hello, world!</h1>
    )
  }
}