我正在构建一个PhotoViewer,当用户向左或向右按时,它会更改照片。我正在使用React,Redux,react-router和react-router-redux。当用户向左或向右按时,我做两件事,我使用 this.context.replace()
更新 url,并调度一个操作来更新当前查看的照片,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 差异三次。我想这并不重要,因为什么都没有改变。我是这个工具集的新手,所以请随时提出有关此问题的更多问题。
如果您在三个不同的阶段设置状态,那么组件也将重新渲染三次。
setState(( 将始终触发重新渲染,除非有条件 渲染逻辑在 shouldComponentUpdate(( 中实现。
(来源(
您可以在 shouldComponentUpdate(( 中实现逻辑,以防止在遇到性能问题时进行不必要的重新渲染。
我认为这是正常的。如果您没有明显的性能问题,我不会出汗。如果性能开始成为问题,如果您确定某些状态更改不会更改呈现的组件,则可以考虑重写shouldComponentUpdate
生命周期方法。
编辑:如果您只需要在shouldComponentUpdate
生命周期方法中进行浅层比较,您还可以考虑扩展React.PureComponent
而不是React.Component
。更多信息在这里。
这是一个老问题,我明白了,但我也注意到了这个问题。就像唐纳德的回答中提到的,这似乎很正常。我尝试了三件事来解决我的特定情况:
- 我关闭了 React DevTools 插件,看看它是否是重复消息的原因。
- 我检查了另一个浏览器,看看这是否是问题所在。
- 我创建了一个简短的测试来检查它是否发生在简单的组件上。
前两种方法
禁用 React DevTools 插件不会更改记录到控制台的消息数。
更改浏览器也没有效果。我尝试了Chromium和Firefox。
第三种方法
即使是最简单的组件似乎也会多次调用生命周期方法。
给定两个文件,App.js
和 components/TestComponent.js
,如下所示:
// App.js
import React from 'react';
import './App.css';
import Test from './components/TestComponent';
function App() {
console.log('App render');
return (
<div>
<Test />
</div>
);
}
export default App;
// ./components/TestComponent.js
import React, { Component } from 'react';
class Test extends Component {
constructor(props) {
console.log('Test constructed');
super(props);
}
componentDidMount() {
console.log('Test mounted');
}
componentDidUpdate() {
console.log('Test updated');
}
render() {
console.log('Test rendered');
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
}
export default Test;
测试的生命周期方法被多次调用。
笔记
- 我使用创建-反应-应用程序来设置应用程序。
- 反应版本是 16.13.1。
结果和讨论
使用yarn start
,我在控制台中得到以下内容:
App render
TestComponent.js:7 Test constructed
TestComponent.js:7 Test constructed
TestComponent.js:20 Test rendered
TestComponent.js:20 Test rendered
TestComponent.js:12 Test mounted
至少对我来说,yarn
注意到开发版本没有优化,运行yarn build
然后python -m http.server --directory build
提供它会得到一个没有重复消息的页面。
至于为什么你会得到三个渲染而不是两个,我不能说。我的建议是尝试构建应用程序,看看问题是否在生产版本中仍然存在。
如果还是遇到问题,也可以按照唐纳德的建议,在shouldComponentUpdate
中实现逻辑。
如果使用>v16.3,请尝试删除
和它应该工作正常。
为什么?由于 v16.3 用于类组件和 v16.8 用于钩子,React 引入了
以下文章值得一读:
反应组件渲染两次
React Components 渲染两次,让我发疯
等等,你没有使用
注意:这仅适用于开发环境。
删除
您可以删除React.StrictMode
以前:
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
自:以前:
root.render(
<App />
);
文件默认值为index.js