我正在构建一个 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 次。我想这并不重要,因为什么都没有改变。我是这个工具集的新手,所以请随时询问有关此问题的任何更多问题。
最佳答案
如果您在三个不同的阶段设置状态,那么组件也会重新渲染三次。
setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().
( source )
您可以在 shouldComponentUpdate() 中实现逻辑如果遇到性能问题,可以防止不必要的重新渲染。
关于javascript - 推送新 URL 时,React 组件渲染会被多次调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35136836/