Javascript 反应序列化组件以从服务器发送_Javascript_Serialization_Reactjs_Ecmascript 6

Javascript 反应序列化组件以从服务器发送

javascript serialization reactjs ecmascript-6

Javascript 反应序列化组件以从服务器发送,javascript,serialization,reactjs,ecmascript-6,Javascript,Serialization,Reactjs,Ecmascript 6,我在一个网站上工作，其中包含一些博客。我想把我的个人博客文章作为React组件来写，这样它们就可以包含其他组件博客帖子如下图所示，位于separat文件中 export default { name: 'test', title: 'Test', description: 'Description todo …', featureUrl: '/img/articles/test.jpg', component: class extends React.Component{

我在一个网站上工作，其中包含一些博客。我想把我的个人博客文章作为React组件来写，这样它们就可以包含其他组件

博客帖子如下图所示，位于separat文件中

export default {
  name: 'test',
  title: 'Test',
  description: 'Description todo …',
  featureUrl: '/img/articles/test.jpg',
  component: class extends React.Component{
    render() {
      return (
        <div>
          <p>Here goes the test article …</p>
          <p>Some more …</p>
          <p>Some more …</p>
          <p>Some more …</p>
        </div>
      );
    }
  }
};

这是可行的，但实际上不是我想要的。我希望该组件可以通过状态从商店中获得。另一种选择是在客户机上重新初始化存储，但是将状态从服务器发送到客户机的整个过程是毫无意义的

有没有更好的方法来处理这个问题

我正在使用Redux作为通量库。

您只想序列化存储，这是正确的

服务器呈现的基本思想是，当请求进入服务器时，您收集必要的数据（在您的案例中是一篇博客文章），用它创建一个Redux存储，然后将整个应用程序组件树呈现到一个字符串服务器端，预填充正确的状态

下面是一个使用Redux 1.0.0语法和ES6的Node.js服务器渲染方法的粗略示例：

const initialState = {
  post: getBlogPostById(id); // or however you get your data
};

const reducer = combineReducers(reducers);
const store = createStore(reducer, initialState);

const stateString = JSON.stringify(initialState);

const appString = React.renderToString(
  <Provider store={store}>
    {() => <App/>}
  </Provider>
);

在本例中，

app.js

是连接的js代码，其中包含获取该

stateString

数据所需的代码，用它重新创建相同的Redux存储，然后呈现相同的组件树。React足够智能，可以在服务器端初始化客户端上的同一组件树时有效地“重新水合”我们创建的现有DOM。所以你的客户端JS可能看起来像

<body>
  <div id="app">{{{appString}}}</div>
  <script>window.INITIAL_STATE = {{{stateString}}}</script>
  <script src="/app.js"></script>
</body>

const reducer = combineReducers(reducers);
const store = createStore(reducer, window.INITIAL_STATE);

React.render(
  <Provider store={store}>
    {() => <App/>}
  </Provider>,
  document.getElementById('app')
);

常数减速机=组合减速机（减速机）；
const store=createStore（减速机、窗口、初始状态）；
反应(
{() => }
,
document.getElementById（'app'）
);

另一方面，将组件作为本机对象的属性和一些元数据一起导出的方式看起来不太习惯。通常，React有一个“每个文件一个组件”的约定，然后您可以将元数据存储在某个地方的专用JSON文件中。将UI组件定义与数据结构分离可能有助于应用程序的体系结构，但YMMV当然…

将post转换为HTML，然后对HTML进行预处理，以查看它是否使用

数据-

属性或其他内容引用了任何其他组件，这似乎要容易得多。这也是网络组件的完美用例。非常感谢您的回复！事实上，我是从你那里得到这个主意的。我也喜欢“每个文件一个组件”的约定，但这让我感觉很好。关于序列化：实际上，我已经进行了去水化/再水化处理。除了组件。存储的序列化版本包括除组件之外的所有数据，因为组件是一个函数，不能序列化函数。它们只是从对象中剥离出来…我不确定序列化组件是什么意思。据我所知，这些组件根本不需要序列化。。。只有状态需要序列化，因为组件是基于该状态在客户端上重新创建的。

const reducer = combineReducers(reducers);
const store = createStore(reducer, window.INITIAL_STATE);

React.render(
  <Provider store={store}>
    {() => <App/>}
  </Provider>,
  document.getElementById('app')
);