Javascript 推送新 URL 时多次调用 React 组件渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35136836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React component render is called multiple times when pushing new URL
提问by egidra
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.
我正在构建一个 PhotoViewer，它可以在用户向左或向右按下时更改照片。我正在使用 React、Redux、react-router 和 react-router-redux。当用户向左或向右按下时，我会做两件事，我使用更新 urlthis.context.replace()并发送一个操作来更新当前查看的照片，this.props.dispatch(setPhoto(photoId)). 我正在订阅用于调试的状态更改。
Each of the above lines triggers a new state change. Dispatching an action updates the store since I update the currentlyViewedPhotoand 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 renderfunction gets called twice. In the second rerendering cycle, the component's renderfunction gets called once. Is this normal? Here is the relevant code:
上述每一行都会触发一个新的状态变化。调度操作会更新商店，因为我更新了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)
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.
渲染被调用 3 次这正常吗？这似乎有点矫枉过正，因为 React 必须对 DOM 进行三遍差异。我想这并不重要，因为什么都没有改变。我是这个工具集的新手，所以请随时提出有关此问题的更多问题。
采纳答案by Donald
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 shouldComponentUpdatelifecycle method if you are certain that certain state changes won't change the rendered component.
我会假设这是正常的。如果您没有明显的性能问题，我不会出汗。如果性能开始成为问题，shouldComponentUpdate并且您确定某些状态更改不会更改呈现的组件，则可以考虑覆盖生命周期方法。
Edit: You could also look into extending React.PureComponentinstead of React.Componentif you only need shallow comparison in your shouldComponentUpdatelifecycle method. More info here.
编辑：如果您只需要在生命周期方法中进行浅层比较，您也可以考虑扩展React.PureComponent而不是。更多信息在这里。React.ComponentshouldComponentUpdate
回答by villeaka
If you are setting state at three different stages then the component will re-render three times as well.
如果您在三个不同的阶段设置状态，那么组件也会重新渲染三次。
setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().
除非在 shouldComponentUpdate() 中实现了条件渲染逻辑，否则 setState() 将始终触发重新渲染。
(source)
（来源）
You can implement logic in shouldComponentUpdate()to prevent unneeded re-renders if you are experiencing performance issues.
如果遇到性能问题，您可以在shouldComponentUpdate() 中实现逻辑以防止不必要的重新渲染。
