异步Redux Action分发时组件重复渲染问题咨询

可能的原因分析 #

1. Recompose高阶组件的不稳定引用问题 #

Recompose的withHandlers、withState等HOC如果使用不当，很容易生成不稳定的props引用，导致组件反复重渲染：

• 比如withHandlers里如果直接在回调里创建新函数（没有用闭包缓存），每次组件渲染都会生成新的handler函数，组件会认为props.handler变化了，从而触发重渲染。
• 正确的缓存写法应该是：

  withHandlers({
    handleClick: ({ dispatch }) => () => {
      // 这里的dispatch是稳定引用，所以handler不会每次都变
      dispatch(yourAsyncAction());
    }
  })
  

2. Redux connect的配置问题 #

connect的mapStateToProps和mapDispatchToProps是重渲染的关键：

• mapStateToProps：如果每次返回新的对象/数组（比如return { list: [...state.list] }），哪怕状态没变化，浅比较也会认为props更新，触发重渲染。确保你只返回需要的状态，并且不创建不必要的新引用。
• mapDispatchToProps：如果你手动绑定action creators，而不是让connect自动处理，可能会每次渲染生成新的函数引用。用redux-actions的action creators时，直接把对象传给connect的第二个参数即可，connect会自动用bindActionCreators绑定稳定的引用：

  connect(mapState, { yourAsyncAction })(YourComponent)
  

3. 异步Action链的多次dispatch #

你的异步Action链可能在首次点击时触发了多次dispatch（比如请求开始、请求成功甚至失败回滚等多个action），每个dispatch都会更新Redux Store，从而触发一次组件渲染。后续点击可能因为缓存或者状态已存在，减少了dispatch的次数？

• 给每个action creator加日志，比如：

  const fetchDataStart = createAction('FETCH_DATA_START');
  const fetchDataSuccess = createAction('FETCH_DATA_SUCCESS');
  
  // 在异步action里加日志
  const fetchData = () => async dispatch => {
    console.log('Dispatching start');
    dispatch(fetchDataStart());
    const data = await apiCall();
    console.log('Dispatching success');
    dispatch(fetchDataSuccess(data));
  };
  

  看首次和后续点击分别dispatch了多少个action，每个action是否都会触发state更新。

4. 类组件的重渲染控制缺失 #

普通类组件如果没有使用React.PureComponent或者自定义shouldComponentUpdate，会在任何props或state变化时触发渲染，哪怕变化的props和组件无关。

• 把类组件改成继承React.PureComponent，或者手动实现shouldComponentUpdate做浅比较，过滤掉无关的props变化。

排查步骤 #

1. 打开React DevTools的Highlight Updates功能，直观看到哪些组件在重渲染，确认是当前组件本身还是子组件导致的多次渲染。
2. 在mapStateToProps里添加日志，对比每次返回的props引用是否一致，比如：

   const mapState = state => {
     const props = { data: state.data };
     console.log('mapState props', props);
     return props;
   };
   

   如果每次渲染都打印新的对象引用，说明存在不必要的新引用创建。
3. 检查Redux DevTools的State变化记录，看每次点击对应多少次state更新，每次更新的原因是什么（哪个action触发的）。
4. 对于Recompose组件，尝试用pure HOC包裹，看是否能减少重渲染次数，但前提是props都是稳定引用。

总结 #

你的组件多次渲染肯定是不符合预期的，核心要么是props/state存在不稳定引用导致的无意义重渲染，要么是异步Action链触发了多次state更新。按照上面的步骤逐一排查，应该能定位到问题所在。

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