构建React Universal Blog应用程序：实施通量

>本教程演示了使用Flux Architecture构建可扩展的React Universal Blog应用程序。 第二部分专注于内容管理和应用程序缩放。

密钥概念：

• > 数据管理的通量模式：在单个“商店”中集中了状态管理，以确保数据一致性。
• 模块化路线结构：分解成较小，更易于管理的组件，以改善组织。 routes.js
智能与哑巴组件：
• 更高级别（智能）组件处理数据操作，而基于接收的道具，较低级别（哑巴）组件渲染UI，促进单向数据流。 AppDisPatcher作为Action Handler：用于将数据更新从操作分配到商店的中心枢纽。>
• 宇宙JS CMS集成：动态管理和获取应用程序数据，增强可伸缩性和可维护性。>
>服务器端渲染（SSR）：通过在服务器和客户端上呈现React应用程序来改善SEO和性能。>
• 重构：

为了改善组织，

>文件被重构以将页面路由分为单个组件。 更新的代码包括用于数据管理 routes.js商店：真理的单一来源

>

磁通routes.js是应用程序数据的真实来源。 关键原则包括：AppStore

<code class="language-javascript">// routes.js
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import AppStore from './stores/AppStore'
import App from './components/App'
import Blog from './components/Pages/Blog'
import Default from './components/Pages/Default'
import Work from './components/Pages/Work'
import NoMatch from './components/Pages/NoMatch'

export default (
  <route path="/" data="{AppStore.data}" component="{App}">
    <indexroute component="{Blog}/">
    <route path="about" component="{Default}/">
    <route path="contact" component="{Default}/">
    <route path="work" component="{Work}/">
    <route path="/work/:slug" component="{Work}/">
    <route path="/blog/:slug" component="{Blog}/">
    <route path="*" component="{NoMatch}/">
  </route>
)</route></route></route></route></route></indexroute></route></code>

无直接操作。

UI是数据驱动的；数据位于商店中。

UI变化起源于存储数据更新。

数据通过道具单向从高级到较低级别的组件。Store

1. 文件实现了以下操作：
3. react组件：智能和愚蠢
4. >
>改变数据的操作仅限于高级（智能）组件，而低级（愚蠢）组件根据道具构成UI。

组件证明了这一点：

> AppStore.js

<code class="language-javascript">// AppStore.js
import { EventEmitter } from 'events'
import _ from 'lodash'

export default _.extend({}, EventEmitter.prototype, {
  data: {
    ready: false,
    globals: {},
    pages: [],
    item_num: 5
  },
  emitChange: function(){ this.emit('change') },
  addChangeListener: function(callback){ this.on('change', callback) },
  removeChangeListener: function(callback) { this.removeListener('change', callback) }
})</code>

和

>组件说明了数据如何从高级到较低级别的组件流动：>

（注意：其他组件的完整代码，例如

>，，App.js>和

和

<code class="language-javascript">// App.js
import React, { Component } from 'react'
import AppDispatcher from '../dispatcher/AppDispatcher'
import AppStore from '../stores/AppStore'
import Nav from './Partials/Nav'
import Footer from './Partials/Footer'
import Loading from './Partials/Loading'

export default class App extends Component {
  componentDidMount(){ AppStore.addChangeListener(this._onChange.bind(this)) }
  componentWillUnmount(){ AppStore.removeChangeListener(this._onChange.bind(this)) }
  _onChange(){ this.setState(AppStore) }
  getStore(){
    AppDispatcher.dispatch({ action: 'get-app-store' })
  }
  render(){
    const data = AppStore.data
    if(!data.ready){
      document.body.className = ''
      this.getStore()
      let style = { marginTop: 120 }
      return (<div classname="container text-center" style="{style}"><loading></loading></div>)
    }
    const Routes = React.cloneElement(this.props.children, { data: data })
    return (
      <div>
        <nav data="{data}/">
        {Routes}
        <footer data="{data}/">
      </footer></nav>
</div>
    )
  }
}</code>

>，省略了，但在引用的github存储库中可用。）

） 态

config.js文件用于连接到宇宙JS CMS。 该文件使用app-server.js>处理服务器端渲染。 为开发和生产构建配置了ReactDOMServer.renderToStaticMarkup脚本。package.json>

结论

本教程为构建强大而可扩展的通用博客应用程序提供了基础。通量体系结构和服务器端渲染的使用可增强性能，SEO和可维护性。 完整的代码可在GitHub上找到。 FAQ部分解决了有关通量，React和通用应用的常见问题。

以上是构建React Universal Blog应用程序：实施通量的详细内容。更多信息请关注PHP中文网其他相关文章！