保存 React 组件并稍后加载

Question

我在 react 本机应用程序中有 react 组件，这将像这样返回 Smth：

constructor(){
    ...
    this.Comp1 = <Component1 ..... >
    this.Comp2 = <Component2 ..... >
}
render(){
    let Show = null
    if(X) Show = this.Comp1
    else Show = this.Comp1
    return(
        {X}
        )
    }

我的两个组件内部都有一个API请求，

所以我的问题是当条件发生变化并且这在组件之间切换时，每次组件向该 API 发送请求以获得相同的结果时，

我想知道如何保存他们每次都不会发送请求的构造组件

Answer 1

其中一种方法是处理每个子组件内部的隐藏和显示comp1和comp2

因此，您仍将从父组件渲染comp1和comp2，但您将向每个组件传递一个 prop，告诉他们是否需要显示或隐藏内部内容，如果显示则渲染正确的组件内容，否则只需渲染空<Text></Text>

这意味着两个子组件都存在于父组件中，并且它们永远不会被删除，但您可以控制哪个子组件应通过父组件显示其自己的内容。

因此，您的数据只会提取一次。

检查 react js 中的工作示例：https://codesandbox.io/s/84p302ryp9
如果您检查了控制台日志，您会发现 comp1 和 comp2 的获取只完成了一次。

还要检查下面的 react 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>
    )
  }
}

比较1：

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>
    )
  }
}

比较2：

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>
    )
  }
}

Answer 2

我认为，您应该将所有逻辑移动到主组件（获取和保存数据，因此组件 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>
    )
  }
}