推送新URL时，多次调用React组件渲染

Question

我正在构建一个PhotoViewer，当用户向左或向右按​​下时可以更改照片。我正在使用React，Redux，react-router和react-
router-
redux。当用户按下向左或向右this.context.replace()按钮时，我会做两件事，我使用来更新网址，并调度一个操作来更新当前查看的照片this.props.dispatch(setPhoto(photoId))。我正在订阅状态更改以进行调试。

以上每一行都会触发新的状态更改。因为我更新了currentlyViewedPhoto，所以分派操作会更新存储，而更新URL会更新存储，因为react-
router-
redux会更新存储中的URL。当我分派动作时，在第一个重新呈现周期中，组件的render函数被调用两次。在第二个重新渲染周期中，组件的render函数被调用一次。这正常吗？以下是相关代码：

class PhotoViewer extends Component {
  pressLeftOrRightKey(e) {
    ... code to detect that left or right arrow was pressed ...

    // Dispatching the action triggers a state update
    // render is called once after the following line
    this.props.dispatch(setPhoto(photoId)) // assume photoId is correct

    // Changing the url triggers a state update
    // render is called twice
    this.context.router.replace(url) // assume url is correct
    return
  }

  render() {
    return (
      <div>Test</div>
    )
  }
}

function select(state) {
  return state
}

export default connect(select)(PhotoViewer)

渲染被称为三次正常吗？这似乎有些大材小用，因为React必须将DOM进行三遍比较。我猜这并不重要，因为什么都没有改变。我是这个工具集的新手，所以随时可以问这个问题。

Answer 1

我认为这是正常的。如果您没有明显的性能问题，那我就不为所动。如果性能开始成为问题，shouldComponentUpdate如果可以确定某些状态更改不会更改渲染的组件，则可以考虑重写生命周期方法。

编辑：您也可以考虑扩展，React.PureComponent而不是React.Component只在shouldComponentUpdate生命周期方法中需要进行浅层比较。更多信息在这里。