Question

我在我的应用中使用react，redux和immutablejs。商店是不可变的，并映射到道具。将调度映射到props时，我提供了辅助函数。辅助函数与redux TodoList示例中的这段代码相当：

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

我目前遇到的问题是我的纯组件渲染太频繁：上面的连接在每次连接时都会创建一个onTodoClick函数。当PureRenderMixin shallow将currentProps与newProps进行比较时，它会将组件标记为shouldUpdate，因为指针已更改。

如何在保持组件的rendercount低的同时在容器中定义辅助函数？

我已经查看了重新选择但计划仅使用它来计算mapStateToProps中的派生状态。为每个连接创建一个选择器是否更好，所以你的函数也被记忆了？

Answer 1

这可能是一个hack，但你可以根据dispatch参数记住该函数（假设redux总是为同一个商店发送相同的函数）：

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

或使用lodash memoize：

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

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

注意：在需要更多控制渲染性能的高级场景中，mapDispatchToProps（）也可以返回一个函数。在这种情况下，该函数将用作特定组件实例的mapDispatchToProps（）。这允许您进行每个实例的memoization。您可以参考＃279及其添加的测试以获取更多详细信息。大多数应用程序从不需要这个。

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

Answer 2

lodash中的节流功能可以解决您的问题。它将确保每x毫秒最多渲染一次组件。

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

2 个答案: