Question

我已经阅读了http://scotch.io/tutorials/javascript/build-a-real-time-twitter-stream-with-node-and-react-js，它描述了一种无缝接管服务器呈现的React组件的技术：

服务器在手柄中呈现{{{markup}}}，并传递初始状态。

<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文件中定义，这允许我有几个组件在同一个商店中监听不同的更改。

这确实很好。

回答你的问题：

这取决于你的用例。忽略在服务器上呈现初始页面对于SEO来说很有用，如果用户都应该看到几乎相同的内容，它只会在服务器上呈现。我喜欢在客户端保留客户端内容。

我希望这有助于你

在React组件中设置渐进增强的初始状态＆amp; Flux架构

1 个答案: