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

Question

我的组件有一个按钮。通过单击按钮，将调度一个操作并进行相应的 API 调用。 API 调用的响应存储在 redux 中。但是每当 redux 存储有更新时，组件(我正在处理的)就会被卸载并重新安装。因此，当组件重新挂载时，组件的内部状态会被销毁并重新创建。

我的问题是:

每当 redux store 更新时，组件是否需要卸载和重新挂载？如果是预期的，我应该如何持久化组件的内部状态？

异步组件:

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 状态。

如果您有渲染组件的条件，那么当条件为假时，组件可能会被销毁。如果您将状态作为 Prop 传递，那么它可能只会更新而不会卸载。

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