Reactjs。渲染计数器

Question

如何在父组件中渲染子组件的计数器？

我有 2 个组件Widget（父组件）和Message（子组件）。我将计数器从子项传递给父项，并尝试设置从子项集获取值到状态。我犯了错误：Maximum update depth exceeded.

有子组件Message：

    import React, { Component } from "react";

export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor = this.changeColor.bind(this);
    this.changeCount = this.changeCount.bind(this);

    this.state = { h: 0, counter: 0 };
  }

  changeColor = () => {
    this.setState(state => ({
      h: Math.random()
    }));
  };

  changeCount = () => {
    this.setState(state => ({
      counter: ++state.counter
    }));
  };

  componentDidUpdate(prevProps) {
    this.props.getColor(this.color);
    this.changeCount();
    this.props.getCount(this.state.counter);
  }

  render() {
    const { children } = this.props;
    const { s, l, a } = this.props.color;

    this.color = `hsla(${this.state.h}, ${s}%, ${l}%, ${a})`;

    return (
      <p
        className="Message"
        onClick={this.changeColor}
        style={{ color: this.color }}
      >
        {children}
      </p>
    );
  }
}

有父组件：

import React, { Component } from "react";
import Message from "./Message/Message";

export default class Widget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: {
        s: 30,
        l: 60,
        a: 1
      },
      counter: 0
    };
  }

  getCount = count => this.setState(state => ({
    counter: state.counter
  }));

  getColor = color => {
    console.log(`the color is ${color}`);
  };

  render() {
    const counter = this.state.counter;

    return (
      <div>
        <Message
          getColor={this.getColor}
          getCount={this.getCount}
          color={this.state.color}
        >
          {undefined || `Hello World!`}
        </Message>
        {counter}
      </div>
    );
  }
}

我做错了什么？

Answer 1

@Yossi 的答案计算了所有组件实例的总渲染次数。该解决方案计算单个组件已完成的渲染和重新渲染次数。

用于计算组件实例渲染次数

import { useRef } from "react";


export const Counter = props => {
    const renderCounter  = useRef(0);
    renderCounter.current = renderCounter.current + 1;
    return <h1>Renders: {renderCounter.current}, {props.message}</h1>;
};

Answer 2

export default class Message extends React.Component {
    constructor() {
        this.counter = 0;
    }

    render() {
        this.counter++;
        ........
    }
}