将相同的数据传递给两个React组件的最佳方式？

import React from 'react';

const MyContext = React.createContext();

class App extends React.Component {
  state = {
    data: 'Hello World',
  };

  render() {
    return (
      <MyContext.Provider value={this.state.data}>
        <ComponentA />
        <ComponentB />
      </MyContext.Provider>
    );
  }
}

export default App;

import React from 'react';

class ComponentA extends React.Component {
  render() {
    return (
      <div>
        <h1>Component A</h1>
        <MyContext.Consumer>
          {data => <p>{data}</p>}
        </MyContext.Consumer>
      </div>
    );
  }
}

export default ComponentA;

import React from 'react';

class ComponentB extends React.Component {
  render() {
    return (
      <div>
        <h1>Component B</h1>
        <MyContext.Consumer>
          {data => <p>{data}</p>}
        </MyContext.Consumer>
      </div>
    );
  }
}

export default ComponentB;