写出更优雅的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.props.text}
      </div>
    );
  }
}

(3)、 Parent.js文件：在共同的父组件 Parent.js 中，会将 ChildA 和 ChildB 组合起来，并分别向其中注入数据

import React from "react";
import ChildA from './ChildA'
import ChildB from './ChildB'
class Parent extends React.Component {
   
  state = {
   
    textA: '我是A的文本',
    textB: '我是B的文本'
  }