Question

我的组件有一个按钮。通过单击按钮，将调度动作并进行相应的API调用。来自API调用的响应存储在redux中。但是，只要对redux存储进行了更新，就会卸载并重新安装该组件（我正在处理的组件）。因此，在重新安装组件时会破坏并重新创建组件的内部状态。

我的问题是：

是否需要在Redux存储更新时卸载并重新安装组件？如果可以预期，我应该如何保持组件内部状态？

AsyncComponent：

export default function asyncComponent(importComponent) {
  class AsyncComponent extends React.Component {
  state = {
    component: null
  };

  isComponentMounted = false;

  componentWillMount() {
    this.isComponentMounted = true;
  }

  async componentDidMount() {
    const { default: component } = await importComponent();
    if (this.isComponentMounted) {
      this.setState({ component });
    }
  }

  componentWillUnmount() {
    this.isComponentMounted = false;
  }

  render() {
    // eslint-disable-next-line react/destructuring-assignment
    const C = this.state.component;

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

return AsyncComponent;
}

Answer 1

这完全取决于您的实现，而不取决于Redux状态。

如果您有条件渲染组件，则当条件为假时，组件可能会被破坏。如果您要通过状态作为道具，那么状态可能会更新而不会卸载。

在您的情况下，您似乎使用状态作为呈现组件的条件。

Answer 2

在redux存储更新中，该组件将不会重新安装，而是将重新渲染。可能会发生父组件正在重新渲染，而您当前的组件正在通过父对象的prop获取数据的情况，因此您正在观察问题。请检查一次父组件。

每当redux存储更新时，react组件是否会被卸载并重新安装？

2 个答案: