Question

我根据他们在README.md中提供的链接将我的create-react-app与React路由器分开代码：https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

它描述了如何创建AsyncComponent以促进延迟加载：

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

Eslint抱怨在componentDidMount中设置状态：

Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.

我们无法使用componentWillMount代替？

Answer 1

在componentDidMount中设置状态为not as bad as Eslint makes it sound：

在此方法中调用setState（）将触发额外的渲染，但是保证在相同的时间内冲洗。这保证了即使在这种情况下，用户也会调用render（）两次不会看到中间状态。请谨慎使用此模式因为它经常导致性能问题。但它可以当您需要测量时，需要模态和工具提示等案例 DOM节点在渲染依赖于其大小或的大小之前位置。

它实际上不会导致布局颠簸，因为一切都将在下一个动画帧之前执行。除非您的应用程序非常复杂，否则它可能不会产生明显的差异。

componentWillMount可能很好用，可能的例外是，如果您决定利用error boundaries，您可能会看到组件调用componentWillMount，遇到错误等问题，以及在没有经历整个生命周期的情况下失败（即componentWillUnmount）。

就我个人而言，如果我使用道具或其他一些已知信息同步设置状态，我会使用构造函数。为了启动像AJAX这样的异步调用，我把它放在componentDidMount中，因为从概念上讲，我希望组件成功安装并渲染，然后启动保湿过程。

延迟加载组件中的生命周期方法选择

1 个答案: