获取反应呈现调用的原因

Question

我有一个组件，在某些条件下，将继续在一个看似无限循环中呈现。有很多代码，并且需要花费相当多的时间将它放在一个干净的stackoverflow问题中，但是在代码或调试器中有没有办法看看源代码是什么投降的是？即道具或州在渲染树中更高的位置导致重新渲染？

Answer 1

我在你的未来会看到很多console.log。从最后一个组件开始，输出props和state以查看更改内容以及来自哪里，然后向上移动一个级别并重复直到找到罪魁祸首。

有Maya callbacks cheatsheet可以帮助你缩小嫌疑人的范围。

祝你好运。希望其他人知道更好的方法来做到这一点。

Answer 2

我建议玩https://facebook.github.io/react/docs/perf.html。

使用print wasted方法，您可以获得有关不必要地重新呈现哪个组件以及哪个组件调用该操作的非常有用的信息。

此外，打印操作使您可以获得有关调用重新渲染的操作的信息。

我创建了一个简单的组件，可以更轻松地使用这些perf函数：

JS：

import React, { PureComponent, PropTypes } from 'react'
import Perf from 'react-addons-perf'

class PerfProfiler extends PureComponent {

state = {
  isStarted: false,
  isMinimized: this.props.minimized,
}

toggle = () => {
  const { isStarted } = this.state

this.setState({
  isStarted: !isStarted,
}, () => {
   if (isStarted) { Perf.stop() }
   else { Perf.start() }
  })
}

toggleContent = () => {
  const { isMinimized } = this.state
  this.setState({
    isMinimized: !isMinimized,
  })
}

printWasted = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printWasted(lastMeasurement)
}

printOperations = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printOperations(lastMeasurement)
}

printExclusive = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printExclusive(lastMeasurement)
}

printInclusive = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printInclusive(lastMeasurement)
}

render() {
  const { position, className } = this.props
  const { isMinimized } = this.state
  return (
    <div className={`perf-profiler ${position} ${className}`}>
      <div className="min-button-container">
        <button onClick={this.toggleContent}>_</button>
      </div>
      <div className={`buttons-container ${isMinimized ? 'hidden' : 
''}`}>
      <button className="toggle-button" onClick={this.toggle}>
        {this.state.isStarted ? 'Stop' : 'Start'}
      </button>
      <button onClick={this.printWasted}>Print Wasted</button>
      <button onClick={this.printOperations}>Print Operations</button>
      <button onClick={this.printInclusive}>Print Inclusive</button>
      <button onClick={this.printExclusive}>Print Exclusive</button>
    </div>
  </div>)}
}
export default PerfProfiler

的CSS：

.perf-profiler {

display: flex;
flex-direction: column;
position: absolute;
border: 1px solid;
padding: 20px;
background-color: rgba(#ffffff, 0.8);
z-index: 10;

&.top-left {
  left: 0;
  top: 0;
}

&.top-right {
  right: 0;
  top: 0;
}

&.bottom-left {
  bottom: 0;
  left: 0;
}

&.bottom-right {
  bottom: 0;
  right: 0;
}

&.center {
  top: 50%;
  left: 50%;
}

.toggle-button {
  margin-left: 0.5em;
}

.min-button-container {
  display: flex;

  flex: 1;
  justify-content: flex-end;
}

.buttons-container {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none;
}
}

您所做的只是将此组件导入您的父组件，单击开始，使用应用程序，按停止并打印浪费/打印操作。有关浪费的重新呈现/调用操作的信息将显示在控制台中。

示例用例：

请记住 npm i react-addons-perf --save-dev ，请使用此组件