如何在智能容器中定义函数时保持组件的纯净？

Question

我在我的应用程序中使用了react，redux和immutablejs。商店是不可变的，并且映射到道具上。当将分派映射到道具时，我提供了助手函数。辅助函数可与redux TodoList示例中的代码进行比较：

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

我目前遇到的问题是，我的纯组件呈现得太频繁了:上面的连接创建了每个连接的onTodoClick函数。当PureRenderMixin shallowCompares将currentProps标记为newProps时，它会将组件标记为shouldUpdate，因为指针已经更改。

如何在容器中定义助手函数，同时保持组件的呈现计数低？

我已经看过了重新选择，但计划只用于计算mapStateToProps中的派生状态。是否最好为您所做的每一个连接创建一个选择器，这样您的功能也会被回传？

Answer 1

这可能是一次黑客攻击，但您可以根据dispatch参数(假设redux总是为同一个存储发送相同的函数)来回溯该函数：

let lastDispatch;
let dispatchProps;
const mapDispatchToProps = (dispatch) => {
  if (!dispatchProps || dispatch !== lastDispatch) {
    dispatchProps = {
      onTodoClick: (id) => {
        dispatch(toggleTodo(id))
      }
    }
    lastDispatch = dispatch;
  }
  return dispatchProps;
}

或者使用“房客回忆录”：

const mapDispatchToProps = _.memoize((dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
})

更新:这不是黑客，它似乎与他们的官方文档一致：

注意:在需要对呈现性能进行更多控制的高级场景中，mapDispatchToProps()还可以返回一个函数。在本例中，该函数将用作特定组件实例的mapDispatchToProps()。这允许你做每个实例的回忆录。您可以参考#279和它添加的测试来获得更多细节。大多数应用程序都不需要这个。

请参阅：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Answer 2

油门功能在房车可以解决您的问题。它将确保组件最多每x毫秒呈现一次。