推送新内容时多次调用 React 组件渲染 URL

Question

我正在构建一个 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)

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

Answer 1

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

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

(source)

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

Answer 2

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

编辑：如果您只需要在 shouldComponentUpdate 生命周期方法中进行浅层比较，您还可以考虑扩展 React.PureComponent 而不是 React.Component。更多信息 here.

Answer 3

这是一个老问题，我明白了，但我也注意到了这个问题。就像唐纳德的回答中指出的那样，这似乎很正常。我尝试了三件事来解决我的具体问题：

我关闭了 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;

Test 的生命周期方法被多次调用。

备注

我使用 create-react-app 来设置应用程序。
反应版本是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 提供一个页面没有重复的消息。

至于为什么你得到三个渲染而不是两个，我不能说。我的建议是尝试构建应用程序并查看问题是否在生产构建中仍然存在。

如果还是遇到问题，也可以按照Donald的建议，实现shouldComponentUpdate中的逻辑。

Answer 4

If using >v16.3, then try removing <React.StrictMode> and it should work fine.

为什么？自从 class 组件的 v16.3 和钩子的 v16.8 以来，React 引入了以过渡到 Concurrent React（在不久的将来未来）更多开发人员友好，因为渲染阶段可以调用多次。

以下文章值得一读：

React Components rendered Twice

React Components render twice and drive me crazy

Wait, you're not using <React.StrictMode>?!

注意：这仅适用于开发环境。

Answer 5

删除也适用于我的情况

推送新内容时多次调用 React 组件渲染 URL

React component render is called multiple times when pushing new URL

javascript

reactjs

react-router

redux

前两种方法

第三种方法

备注

结果与讨论