时间戳

首页 > 解决方案 > 有没有办法仅在调用函数时获取 react-redux 存储值？

redux - 有没有办法仅在调用函数时获取 react-redux 存储值？

问题描述

我调用了 redux 状态timer，并且调用了 state 属性remainingTime（每秒都会更新此属性）。

我可以使用mapStateToPropsoruseSelector获取电流remainingTime并将其传递给组件props。但在那种情况下，我的反应组件每秒重新渲染，因为remainingTime每秒都在更新。我认为这会导致性能问题。

有没有办法timer.remainingTime仅在组件调用函数时（单击按钮时）获取存储值？（无需重新渲染组件）

谢谢你。

标签： reduxreact-redux

解决方案

使用mapStateToProps或useSelector获取每秒更改的值，将使您的组件每秒对更改（双关语）做出反应，因此每秒重新渲染。

但是，如果您的组件没有重新渲染，那么该remainingTime值也不会更新，所以我想这不是您想要的。（否则，如果您不需要它，您可以从道具中删除该值......）

但是，您可以改进的是您获得该价值的地方。

假设您有一个大组件，然后在渲染的标记中，您可以在其中显示该值的小区域：

function BigComponent() {
  const { remainingTime } = useSelector(state => state.timer)
  // Heavy component logic that you cannot optimize or memoize
  // ...
  return (
    <div>
      {/* lots of things heavy to re-render */}
      <div>{remainingTime} seconds</div>
    </div>
  )
}

在这种情况下，您可以通过将状态提升到更接近显示位置来进行优化：

function RemainingTime() {
  const { remainingTime } = useSelector(state => state.timer)
  return <div>{remainingTime} seconds</div>
}

function BigComponent() {
  // Heavy component logic that you cannot optimize or memoize
  // ...
  return (
    <div>
      {/* lots of things heavy to re-render */}
      <RemainingTime />
    </div>
  )
}

这样，只有RemainingTime小组件重新渲染，其余部分不重新渲染。

不确定它是否适用于您的用例，但它是一种典型的性能优化技术。

推荐阅读