Question

我对JS和RN比较陌生，我目前正在使用一个应用程序，我遇到了一些关于我处理组件的重大问题。

我试图浏览以下指南：https://facebook.github.io/react/docs/component-specs.html以及https://facebook.github.io/react/docs/advanced-performance.html，但后者有点过头了。

但是，正如我所理解的那样：componentWillMount会在执行渲染函数之前触发任何代码片段，而componentWillUnmount会删除忘记的任何内容。或者我该如何指定？

我的具体问题在于我有三个函数，一个是main，另一个是main，我有compOne和compTwo，后者在按下某个子导航器时在主要组件中被调用。这意味着我有三个getInitialState实例，而compOne和compTwo基本上定义相同的东西，但调用服务器的不同部分（因此代码非常相似）。

当我走进不同的画面时，这个问题也会重新出现，并再次返回我的主屏幕。

在我的主屏幕中，我有这样的话：

var Home = React.createClass({

  getInitialState: function() {    
    return {
      componentSelected: 'One',
      userName: "Loading...",
      friendFeed: 'Loading...',
      loaded: false,
      loadedlocal: false,
    };
  },
  componentWillMount: function() {
    Method.getFriendFeed(this.props.tokenSupreme)
    .then((res) => this.setState({
      friendFeed: JSON.parse(res).friendPosts,
      loaded: true,
    }))
    .catch((error) => console.log(error))
    .done();

    Method.getLocalFeed(this.props.tokenSupreme, )
    .then((res) => this.setState({
      localFeed: JSON.parse(res).friendPosts,
      loadedlocal: true,
    }))
    .catch((error) => console.log(error))
    .done();  
  },

我将this.state.friedFeed传递给两个组件之一的this.props.friendData，反之亦然。

在我的CompOne中挑选它：

var ComponentOne = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     return { 
      dataSource: ds.cloneWithRows(this.props.friendData),
   };
  },

  render: function() {
    if (!this.props.loaded) {
      return this.renderLoadingView(); 
    } else {
    return (
       <ListView 
          dataSource={this.state.dataSource} 
          renderRow={this.renderRow}
          style={styles.card} /> 
      )
    }
  },

后跟renderRow函数等，compTwo函数基本相同。

但我的问题是：我应该如何卸载组件？如果它甚至是我想要的？另一个经常但不是因此发生的问题是null is not an object (evaluating 'prevComponentInstance._currentElement'的错误引用_updateRenderedComponent因此我相信我应该在安装，卸载和更新我的组件时采用一些不同的方法，或者我错了？

经过一番浏览之后，添加另一个问题，这可能是主要问题......甚至可以让RN应用程序在多个场景中处理多个列表视图和多个获取者？

Answer 1

在大多数情况下，您无需担心卸载组件。当不再需要React组件时，React通常会忘记它，包括它的内容，道具，状态等。componentWillUnmount通常保留用于处于全局状态的事物，一旦忘记组件如果他们仍然存在会导致问题。

您链接的页面上的文档提到清理计时器作为示例。在Javascript中，如果您通过setTimeout() / setInterval()设置计时器，那么这些计时器就存在于全局空间中。现在假设你有一个组件设置一个计时器来修改屏幕上的某个元素或者可能尝试与组件交互，让我们说将来30秒。但随后用户离开屏幕/组件，因为它不再在屏幕上React忘记了它。但是，该计时器仍在运行，并且如果它发生故障可能会导致错误，并且它无法与现在已故的组件进行交互。 componentWillUnmount让您有机会清除该计时器，因此当它触发与不再存在的元素交互时，不会发生奇怪的副作用。

在你的情况下，据我所知，你可能没有任何需要清理的东西。 您可能希望澄清您的问题，因为您没有说出您正在看到的问题行为，但请注意getInitialState仅在第一次调用时如果只有道具改变，则会创建一个组件，并且不会被调用。因此，如果friendData正在更改但组件仍保留在屏幕上，则您需要通过ds更新componentWillReceiveProps。

对于你的上一个问题，是的，React当然可以处理多个ListViews / fetches / etc.

在React Native

1 个答案: