保存反应组件并稍后加载

Question

我在 React Native 应用程序中有 React 组件，这将 return 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>
    )
  }
}

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

Answer 2

我认为，您应该将所有逻辑移至主要组件（获取和保存数据，因此您的组件 1 和组件 2 是简单的哑组件。在组件 1 和组件 2 中，您可以检查 "does component have some data?"，如果没有没有任何数据，您可以在父组件中触发对该数据的请求。

完整的工作示例在这里：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>

    )
  }
}

保存反应组件并稍后加载

save react component and load later

reactjs

react-native

react-native-android

react-dom