javascript - 推送新 URL 时，React 组件渲染会被多次调用

Question

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

以上每一行都会触发新的状态更改。自从我更新 currentlyViewedPhoto 以来，调度操作会更新商店，并且更新 url 会更新商店，因为react-router-redux 会更新商店中的 url。当我分派(dispatch)操作时，在第一个重新渲染周期中，组件的 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)

render被调用3次正常吗？这似乎有点矫枉过正，因为 React 必须进行 DOM 比较 3 次。我想这并不重要，因为什么都没有改变。我是这个工具集的新手，所以请随时询问有关此问题的任何更多问题。

Answer 1

如果您在三个不同的阶段设置状态，那么组件也会重新渲染三次。

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().

( source )

您可以在 shouldComponentUpdate() 中实现逻辑如果遇到性能问题，可以防止不必要的重新渲染。