推送新URL时，多次调用React组件渲染 [英] React component render is called multiple times when pushing new URL

问题描述

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

I am building a PhotoViewer that changes photos when the user presses left or right. I am using React, Redux, react-router, and react-router-redux. When the user presses left or right, I do two things, I update the url using this.context.replace() and I dispatch an action to update the currently viewed photo, this.props.dispatch(setPhoto(photoId)). I am subscribing to state changes for debugging.

以上每一行都会触发新的状态更改.因为我更新了 currentlyViewedPhoto 并更新了URL，所以调度动作将更新商店，这是因为react-router-redux更新了商店中的URL.当我分派动作时，在第一个重新渲染周期中，组件的 render 函数被调用两次.在第二个重新渲染周期中，组件的 render 函数被调用一次.这正常吗?这是相关代码:

Each of the above lines triggers a new state change. Dispatching an action updates the store since I update the currentlyViewedPhoto and updating the url updates the store because react-router-redux updates the url in the store. When I dispatch the action, in the first rerendering cycle, the component's render function gets called twice. In the second rerendering cycle, the component's render function gets called once. Is this normal? Here is the relevant code:

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进行三遍比较.我猜这并不重要，因为什么都没有改变.我是这个工具集的新手，请随时提出有关此问题的更多问题.

Is this normal that render is called three times? It seems like overkill because React will have to do the DOM diffing three times. I guess it won't really matter because nothing has changed. I am new to this toolset, so feel free to ask any more questions about this problem.

推荐答案

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

I would assume that this is normal. If you aren't having noticeable performance issues, I wouldn't sweat it. If performance begins to be a problem, you can look into overriding the shouldComponentUpdate lifecycle method if you are certain that certain state changes won't change the rendered component.

如果您只需要在 shouldComponentUpdate 生命周期中进行浅表比较，则也可以考虑扩展 React.PureComponent 而不是 React.Component 方法.更多信息此处.

You could also look into extending React.PureComponent instead of React.Component if you only need shallow comparison in your shouldComponentUpdate lifecycle method. More info here.

这篇关于推送新URL时，多次调用React组件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！