React/Redux中每次打开页面时获取数据并按需更新状态的最优方案

嘿，这个问题我之前也遇到过，刚好可以给你几个实用的解决方案！

首先得说你当前代码的问题：componentDidUpdate里直接调用fetchPosts()会导致无限循环——因为请求完成后会更新Redux状态，状态更新又会触发componentDidUpdate，接着又发起请求，周而复始停不下来。

下面是几个最优的处理方式，按推荐程度排序：

1. 监听页面焦点（最适合页面跳转场景） #

如果你的项目用的是React Navigation（看你的页面跳转逻辑大概率是），可以用它提供的withNavigationFocus高阶组件，这样就能知道页面是否处于激活状态。每次从Post页面返回Posts时，Posts页面会重新获得焦点，这时就触发数据请求。

修改你的Posts组件：

import { withNavigationFocus } from 'react-navigation';

class Posts extends Component {
  componentDidMount() {
    // 首次加载且页面聚焦时请求
    if (this.props.isFocused) {
      this.fetchPostsIfNeeded();
    }
  }

  componentDidUpdate(prevProps) {
    // 只有当页面从失焦变为聚焦时，才发起请求（比如从Post页面返回）
    if (!prevProps.isFocused && this.props.isFocused) {
      this.fetchPostsIfNeeded();
    }
  }

  // 封装请求逻辑，避免重复请求（比如加载中时不再发起）
  fetchPostsIfNeeded = () => {
    if (!this.props.loading) {
      this.props.fetchPosts();
    }
  }

  render () {
    // ... 你的渲染代码
  }
}

// 原有的mapState和mapDispatch不变
const mapStateToProps = state => {
  return {
    posts: state.posts.posts,
    loading: state.posts.loading,
  }
}
const mapDispatchToProps = dispatch => {
  return {
    fetchPosts: () => dispatch(actions.fetchPosts()),
  }
}

// 用withNavigationFocus包裹组件
export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(Posts));

2. 在Redux Action中对比数据，避免不必要的状态更新 #

不管用哪种方式触发请求，都可以在Action层先对比新获取的数据和当前状态的数据，只有当数据真的变化时，才更新状态。这样即使多次触发请求，也不会做无用的状态更新和组件渲染。

修改你的Action代码：

export const fetchPosts = () => {
  return (dispatch, getState) => {
    dispatch(fetchStarted());
    apiFetchPosts()
      .then(({data}) => {
        const newPosts = data.data;
        // 获取当前Redux状态中的帖子数据
        const currentPosts = getState().posts.posts;

        // 这里写你的数据对比逻辑，下面是两种常见方式：
        // 方式1：简单对比（适合数据结构不复杂的情况）
        const isDataChanged = JSON.stringify(newPosts) !== JSON.stringify(currentPosts);
        
        // 方式2：高效对比（适合大数据量，对比id和内容）
        // const isDataChanged = newPosts.length !== currentPosts.length || 
        //   newPosts.some(post => {
        //     const existingPost = currentPosts.find(p => p.id === post.id);
        //     return !existingPost || JSON.stringify(post) !== JSON.stringify(existingPost);
        //   });

        if (isDataChanged) {
          // 数据变化才更新状态
          dispatch(fetched(newPosts));
        } else {
          // 可选：可以dispatch一个"无更新"的action，方便后续处理
          dispatch(fetchNoChange());
        }
      })
      .catch(error => {
        dispatch(fetchFailed(error));
      })
  }
}

// 新增一个无更新的action类型（记得在reducer里处理，或者忽略）
const fetchNoChange = () => {
  return {
    type: actionTypes.POSTS_FETCH_NO_CHANGE,
  }
}

// 原有的其他action不变
const fetchStarted = () => {
  return {
    type: actionTypes.POSTS_FETCH_START,
  }
}
const fetched = (posts) => {
  return {
    type: actionTypes.POSTS_FETCH_SUCCESS,
    posts,
  }
}
const fetchFailed = (error) => {
  return {
    type: actionTypes.POSTS_FETCH_FAILED,
  }
}

3. 监听路由变化（适合其他路由库） #

如果用的是React Router这类路由库，可以通过withRouter高阶组件获取路由信息，在componentDidUpdate里判断是否从Post页面回到了Posts页面，再触发请求：

import { withRouter } from 'react-router-dom';

class Posts extends Component {
  // ... componentDidMount逻辑不变

  componentDidUpdate(prevProps) {
    // 当路由从Post页面切换回Posts页面时触发请求
    if (prevProps.location.pathname === '/post' && this.props.location.pathname === '/posts') {
      this.fetchPostsIfNeeded();
    }
  }

  // ... 其他逻辑不变
}

// 用withRouter包裹组件
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Posts));

总结 #

最优组合是：用页面焦点监听触发请求（保证每次进入页面都获取最新数据） + 在Action层对比数据（避免不必要的状态更新和渲染），这样既解决了你的问题，又不会有性能浪费。

内容的提问来源于stack exchange，提问作者mishke