推送新URL时多次调用React组件呈现

Question

我正在构建一个PhotoViewer，当用户按左键或右键时，它可以更改照片。我正在使用React、Redux、React router和React router Redux。当用户按下左键或右键时，我会做两件事，使用更新url。上下文replace（）并发送一个操作来更新当前查看的照片，this。道具。调度（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差异。我想这并不重要，因为一切都没有改变。我是这个工具集的新手，所以请随意询问关于这个问题的任何更多问题。

Answer 1

我明白了，这是一个老问题，但我也注意到了这个问题。就像唐纳德的回答中提到的，这似乎很正常。我尝试了三种方法来解决我的具体案例：

• 我关闭了React DevTools插件，看看是否是重复消息的原因。
• 我检查了不同的浏览器，看看这是否是问题所在。
• 我创建了一个简短的测试来检查它是否发生在简单的组件上。

禁用React DevTools插件不会更改登录到控制台的消息数量。

换浏览器也没有效果。我试过Chromium和火狐。

即使是最简单的组件似乎也不止一次调用生命周期方法。

给定两个文件，App。js和组件/TestComponent。js，如下所示：

// App.js

import React from 'react';
import './App.css';
import Test from './components/TestComponent';

functhtml" target="_blank">ion 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;

生命周期测试方法称为多次测试。

• 我使用CreateReact应用程序来设置应用程序

通过纱线开始，我在控制台中获得以下信息：

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构建并将其与python-mhttp.server-目录构建一起提供给一个没有重复的消息。

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

如果您仍然遇到这个问题，您也可以接受Donald的建议，在acidComponentUpdate中实现逻辑。

Answer 2

我认为这是正常的。如果你没有明显的性能问题，我不会担心的。如果性能开始成为问题，如果您确定某些状态更改不会更改呈现的组件，您可以查看重写应该组件更新生命周期方法。

编辑：您还可以研究扩展React。PureComponent而不是React。组件如果您只需要在生命周期方法中进行粗略比较，则应更新组件生命周期方法。更多信息请点击这里。

Answer 3

如果在三个不同阶段设置状态，则组件也将重新渲染三次。

除非在shouldComponentUpdate（）中实现了条件呈现逻辑，否则setState（）将始终触发重新呈现。

（来源）

如果您遇到性能问题，您可以在应该组件更新（）中实现逻辑来防止不必要的重新呈现。