Question

我在反应原生app中有反应组件，这将返回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，但是您将向每个组件传递一个道具，告诉他们是否需要显示或隐藏内部内容，如果显示然后渲染正确的组件内容，否则只渲染空<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

我认为，您应该将所有逻辑移动到主要组件（获取和保存数据，因此component1和component2是简单的哑组件。在component1和component2中，您可以检查＆＃34;组件是否有一些数据？＆＃34;，如果没有任何数据，您可以在父组件中触发对该数据的请求。

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

    )
  }
}

保存反应组件并在以后加载

2 个答案: