在react中如何实现渲染控制？

没有进行渲染控制

import React, { Component } from "react";

export default class RenderControl extends Component {
  constructor(props) {
    super(props);

    this.state = {
      num: 0,
      count: 0,
    };
   
  }

  render() {
    const { num, count } = this.state;
    return (
      <div>
       
        <Child num={num} />
        <button onClick={() => this.setState({ num: num + 1 })}>+{num}</button>
        <button onClick={() => this.setState({ num: count + 1 })}>
          +{count}
        </button>
      </div>
    );
  }
}
const Child = ({ num }) => {
  console.log("子组件执行");
  return <div>this is the child--{num}</div>;
};

有进行渲染控制

import React, { Component } from "react";

export default class RenderControl extends Component {
  constructor(props) {
    super(props);

    this.state = {
      num: 0,
      count: 0,
    };
    this.component = <Child num={this.state.num} />;
  }
  controlRender() {
    const { props } = this.component;
    if (props.num !== this.state.num) {
      return (this.component = React.cloneElement(this.component, {
        num: this.state.num,
      }));
    }
    return this.component;
  }
  render() {
    const { num, count } = this.state;
    return (
      <div>
        {this.controlRender()}

        <button onClick={() => this.setState({ num: num + 1 })}>+{num}</button>
        <button onClick={() => this.setState({ num: count + 1 })}>
          +{count}
        </button>
      </div>
    );
  }
}
const Child = ({ num }) => {
  console.log("子组件执行");
  return <div>this is the child--{num}</div>;
};