写出更优雅的react组件（避免重复渲染）

一、存在问题

一个父组件下面有几个子组件，更改其中一个子组件的数据，其它所有子组件都会重新渲染。
举例：比如说一个父组件（Parent.js）下面有两个子组件(ChildA.js、ChildB.js)。代码如下
（1）、ChildA.js文件：

import React from "react";
export default class ChildA extends React.Component {
   
  render() {
   
    console.log("ChildA 的render方法执行了");
    return (
      <div className="childA">
        子组件A的内容：
        {
   this.props.text}
      </div>
    );
  }
}

（2）、ChildB.js文件：

import React from "react";
export default class ChildB extends React.Component {
   
  render() {
   
    console.log("ChildB 的render方法执行了");
    return (
      <div className="childB">
        子组件B的内容：
        {
   this<