javascript - 为什么我的 React 组件在每次操作后都会安装？

Question

我有一个名为 Home 的 React 组件，它在组件安装时调用一个操作来获取一些组。

我正在调用一个操作，如下所示:

componentDidMount() {
    const { fetchRecentGroups } = this.props;
    fetchRecentGroups();
}

我的 reducer 完美地接收每个 Action ，并返回如下状态:

switch(action.type) {
    case REQUEST_GROUPS:
        return {
            ...state,
            loadState: FETCHING
        };
    case REQUEST_GROUPS_SUCCESS:
        return {
            ...state,
            loadState: SUCCESS,
            groups: action.data.groups,
            totalResults: action.data.totalResults
        };
    default:
        return state;
}

我还在该组件上使用 connect HOC，如下所示:

const mapStateToProps = (state) => {
  return {}
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchRecentGroups: () => {
      dispatch(actions.fetchRecentGroups())
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Home 组件放置在 Route 内，如下所示:

<Route 
    exact={true} 
    path="/" 
    component={Home} 
/>

我的问题是，每次reducer返回一个状态时，都会在循环中一次又一次地调用componentDidMount。我希望挂载在第一次加载时只发生一次。

如果我将 componentDidUpdate 和 componentWillReceiveProps 函数放入组件中，则它们永远不会被调用(仅 componentDidMount)，因此我无法进行比较 Prop 。

有人知道为什么会发生这种情况吗？

编辑:

我发现我的问题是由我的 route 的这段代码引起的:

const RouteBlock = () => {
  if(errorSettings) {
    return <Error {...errorSettings} />
  }
  return (
    <div className={styles.RouteBlock}>
      <Route exact={true} path="/" component={Home} />
      <Route path="/search" render={() => <div>SEARCH</div>} />
    </div>
  );
};

return <Router><RouteBlock /></Router>

我把它改为:

return <Router>{RouteBlock()}</Router>

Answer 1

每次渲染组件时，您都会立即调用设置新状态的函数，并触发组件的重新渲染。也许您应该使用 shouldComponentUpdate 生命周期方法来检查旧状态是否与新状态相同。

查看官方文档:https://reactjs.org/docs/react-component.html#shouldcomponentupdate