2016-05-19 4 views
1

Я относительно новичок в JS и RN, и сейчас я работаю с приложением, где я столкнулся с некоторыми серьезными проблемами, связанными с обработкой компонентов.Монтажные компоненты в реактиве Native

Я попытался пропустить следующий гид: https://facebook.github.io/react/docs/component-specs.html, а также https://facebook.github.io/react/docs/advanced-performance.html, но последний немного летит над моей головой.

Однако, как я понимаю: componentWillMount запускает любой фрагмент кода, который находится внутри до выполнения функции рендеринга, и componentWillUnmount стирает все, что бы забыл. Или как я могу указать?

Моя специфическая проблема заключается в том, что у меня есть три функции, одна основная и внутри основной. У меня есть 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 в одном из двух компонентов, и наоборот для localFeed.

Взяв его в моем 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 может обрабатывать mutiple listviews и mulitple fetchers в мутипетных сценах?

ответ

2

В большинстве случаев вам не нужно беспокоиться о размонтировании компонентов. Когда компонент React больше не нужен, React вообще просто забывает об этом, включая его содержимое, реквизит, состояние и т. Д. componentWillUnmount обычно зарезервирован для вещей, находящихся в глобальном состоянии, что после того, как компонент будет забыт, это вызовет проблемы если они все еще существуют.

Документация на странице, на которую вы ссылались, упоминает, как очистить таймеры. В Javascript, если вы установили таймер через setTimeout()/setInterval(), эти таймеры существуют в глобальном пространстве. Теперь представьте, что у вас есть компонент, который устанавливает таймер для изменения какого-либо элемента на экране или потенциально пытается взаимодействовать с компонентом, скажем, 30 секунд в будущем. Но тогда пользователь переходит от экрана/компонента, и поскольку он больше не находится на экране, React забывает об этом. Тем не менее, этот таймер все еще работает и может вызвать ошибки, если он срабатывает, и он не может взаимодействовать с этим компонентом, который был поврежден. componentWillUnmount дает вам возможность очистить этот таймер, поэтому странные побочные эффекты не возникают, когда он начинает взаимодействовать с элементами, которые больше не существуют.

В вашем случае у вас, вероятно, нет ничего, что требует очистки, насколько я могу судить. Возможно, вы захотите уточнить свой вопрос, потому что не говорите, что такое проблема: вы видите, но обратите внимание также, что getInitialState вызывается только при создании компонента и не будет вызываться, если только реквизит изменение. Поэтому, если friendData меняется, но компонент остается на экране, вам нужно будет обновить ds через componentWillReceiveProps.

К вашему последнему вопросу, да, для React, безусловно, можно обрабатывать несколько ListViews/fetches/etc.

Смежные вопросы