Установки начального состояния в React компонентов для прогрессивного улучшения и архитектуры Flux

Question

я читал на http://scotch.io/tutorials/javascript/build-a-real-time-twitter-stream-with-node-and-react-js и описывает способ взять на сервере оказанного React компоненты легко:

сервера предоставляет в {{{разметки}}} в рулях и передать начальное состояние.

<section id="react-app">{{{ markup }}}</div> 
<script id="initial-state" type="application/json">{{{state}}}</script> 

Тогда на стороне клиента Javascript

/** @jsx React.DOM */ 

var React = require('react'); 
var TweetsApp = require('./components/TweetsApp.react'); 

// Snag the initial state that was passed from the server side 
var initialState = JSON.parse(document.getElementById('initial-state').innerHTML) 

// Render the components, picking up where react left off on the server 
React.renderComponent(
    <TweetsApp tweets={initialState}/>, 
    document.getElementById('react-app') 
); 

Но в потоке архитектуры, например, как описано в этой статье http://scotch.io/tutorials/javascript/creating-a-simple-shopping-cart-with-react-js-and-flux, состояние инициализируется в методе getInitialState жизненного цикла:

// Method to retrieve state from Stores 
function getCartState() { 
    return { 
    product: ProductStore.getProduct(), 
    selectedProduct: ProductStore.getSelected(), 
    cartItems: CartStore.getCartItems(), 
    cartCount: CartStore.getCartCount(), 
    cartTotal: CartStore.getCartTotal(), 
    cartVisible: CartStore.getCartVisible() 
    }; 
} 

// Define main Controller View 
var FluxCartApp = React.createClass({ 

    // Get initial state from stores 
    getInitialState: function() { 
    return getCartState(); 
    }, 

    // Add change listeners to stores 
    componentDidMount: function() { 
    ProductStore.addChangeListener(this._onChange); 
    CartStore.addChangeListener(this._onChange); 
    }, 

    // Remove change listers from stores 
    componentWillUnmount: function() { 
    ProductStore.removeChangeListener(this._onChange); 
    CartStore.removeChangeListener(this._onChange); 
    }, 

    // Render our child components, passing state via props 
    render: function() { 
    return (
     <div className="flux-cart-app"> 
     <FluxCart products={this.state.cartItems} count={this.state.cartCount} total={this.state.cartTotal} visible={this.state.cartVisible} /> 
     <FluxProduct product={this.state.product} cartitems={this.state.cartItems} selected={this.state.selectedProduct} /> 
     </div> 
    ); 
    }, 

    // Method to setState based upon Store changes 
    _onChange: function() { 
    this.setState(getCartState()); 
    } 

}); 

module.exports = FluxCartApp; 

Какой из них является правильным подходом к установлению состояния с точки зрения прогрессивного улучшения?

Answer 1

Думая о постепенном улучшении Мне нравится, как поток и реакция работают вместе.

Я использую ReactJS и Flux в своем текущем проекте, и все чисто и легко. Все, что вам нужно знать, показывает некоторую дисциплину создания новых магазинов, когда это действительно необходимо. Однако мне не нравится материал eventEmitter. Я просто запускаю свои собственные события, которые я определяю в отдельном файле eventConstants.js, это позволяет мне иметь несколько компонентов, которые прослушивают разные изменения в одном хранилище.

Это действительно хорошо масштабируется.

Отвечая на Ваш вопрос:

Это зависит о вашей USECASE. Игнорирование того, что рендеринг исходной страницы на сервере отлично подходит для SEO, делает это только для рендеринга на сервере, если пользователи все видят практически одинаковый контент. Мне нравится хранить клиентские вещи на клиенте.

Я надеюсь, что это помогло вам