Сделать запрос AJAX, когда свойство было изменено

Question

Я хотел бы иметь компонент, который получает свойство из родительского компонента и делает запрос AJAX на основе этого свойства. Родительский компонент может изменить это свойство, а мой дочерний компонент должен получить еще один запрос AJAX.

Вот мой код, но я не уверен, что является оптимальным и даже правильно:

<News source={this.state.currentSource} /> 

Компонент:

var News = React.createClass({ 

    propTypes: { 
    source: React.PropTypes.string 
    }, 

    getInitialState: function() { 
    return { 
     entities: [] 
    }; 
    }, 

    componentWillReceiveProps(nextProps) { 
    var url = 'http://localhost:3000/api/sources/' + nextProps.source + '/news'; 
    this.serverRequest = $.get(url, function(result) { 
     this.setState({ 
     entities: result 
     }); 
    }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 

     // ...  
    }}); 

module.exports = News; 

ли componentWillReceiveProps является хорошим местом для этого кода?

Answer 1

КомпонентWillReceiveProps будет работать нормально, я бы сделал иначе, если <News/> получает свои реквизиты от родительского компонента, тогда хороший шаблон для последующего заключается в том, чтобы родительский компонент фактически обрабатывал вызовы api и передавал результаты в виде реквизит. Таким образом, ваш компонент новостей действительно должен иметь дело с рендерингом контента на основе его реквизита, а не для рендеринга и управления состоянием.

Я могу видеть только ограниченную часть вашего приложения, чтобы это не соответствовало вашему варианту использования, но вот отличная статья о том, что вы делаете этот тип дифференциации между умными и немыми компонентами.

http://jaketrent.com/post/smart-dumb-components-react/