сохранить компонент React и загрузить позже

Один из способов сделать это - обработать скрытие и отображение внутри каждого дочернего компонента comp1 и comp2.

Таким образом, вы по-прежнему будете отображать как comp1, так и comp2 из родительского компонента, но вы передадите опору каждому из них, чтобы сообщить им, нужно ли им отображать или скрывать внутреннее содержимое, если показывать, то отображать правильное содержимое компонента, иначе просто визуализировать пустое <Text></Text>

Это означает, что оба дочерних компонента существуют в родительском компоненте, и они никогда не удаляются, но вы контролируете, какой из них должен показывать собственное содержимое с помощью родительского компонента.

Таким образом, ваши данные извлекаются только один раз.

Проверьте рабочий пример в react js: https://codesandbox.io/s/84p302ryp9
Если вы проверили журнал консоли, вы обнаружите, что загрузка выполняется один раз для comp1 и comp2.

Также проверьте тот же пример в response native ниже:

class Parent extends Component {
  constructor(props)
  {
    super(props);
    this.state={
      show1 : true //by default comp1 will show
    }
  }

  toggleChild= ()=>{
    this.setState({
      show1 : !this.state.show1
    });
  }

  render(){
    return (
      <View >
        <Button onPress={this.toggleChild} title="Toggle Child" />
        <Comp1 show={this.state.show1} />
        <Comp2 show={!this.state.show1} />
      </View>
    )
  }
}

Comp1:

class Comp1 extends Component
{
  constructor(props) {
    super(props);
    this.state={
      myData : ""

    }
  }

  componentWillMount(){
    console.log("fetching data comp1 once");
    this.setState({
      myData : "comp 1"
    })
  }


  render(){
    return (
      this.props.show ? <Text>Actual implementation of Comp1</Text> : <Text></Text>
    )
  }
}

Comp2:

class Comp2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myData2: ""

    }
  }

  componentWillMount() {
    console.log("fetching data in comp2 once");
    this.setState({
      myData2: "comp 2"
    });
  }


  render() {
    return (
      this.props.show ? <Text>Actual implementation of Comp2</Text> : <Text></Text>
    )
  }
}

Я думаю, вам следует переместить всю свою логику в основной компонент (получение и сохранение данных, поэтому вы, чтобы компонент 1 и компонент 2 были простыми глупыми компонентами. В компоненте 1 и компоненте 2 вы можете проверить, есть ли у компонента какие-то данные?), Если их нет любые данные, вы можете инициировать запрос этих данных в родительском компоненте.

Полный рабочий пример здесь: https://codesandbox.io/s/7m8qvwr760

class Articles extends React.Component {
  componentDidMount() {
    const { fetchData, data } = this.props;

    if (data && data.length) return;

    fetchData && fetchData();
  }

  render() {
    const { data } = this.props;

    return (
      <div>
        {data && data.map((item, key) => <div key={key}>{item.title}</div>)}
      </div>
    )
  }
}

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      news: [],
      articles: [],
      isNews: false
    }
  }

  fetchArticles = () => {
    const self = this;  

    setTimeout( () => {
      console.log('articles requested');

      self.setState({
        articles: [{title: 'article 1'}, {title: 'articles 2'}]
      })
    }, 1000)
  }

  fetchNews = () => {
    const self = this;

    setTimeout(() => {
      console.log('news requested');

      self.setState({
        news: [{ title: 'news 1' }, { title: 'news 2' }]
      })
    }, 1000)
  }

  handleToggle = (e) => {
    e.preventDefault();
    this.setState({
      isNews: !this.state.isNews
    })
  }

  render(){
    const { news, articles, isNews} = this.state;

    return (
      <div>
        <a href="#" onClick={this.handleToggle}>Toggle</a>

        {isNews? (
          <News data={news} fetchData={this.fetchNews} />
        ): (
           <Articles data={articles} fetchData={this.fetchArticles} />
        )}

      </div>

    )
  }
}