Tag: isomorphic javascript

React + Flux和服务器端渲染？（同构反应+通量）: 用同构应用程序设置应用程序初始状态的一般做法是什么？没有通量我会简单地使用像这样的东西： var props = { }; // initial state var html = React.renderToString(MyComponent(props); 然后通过快速 {{{reactMarkup}}呈现该标记，并通过{{{reactMarkup}} 。在客户端设置初始状态，我会做这样的事情： if (typeof window !== 'undefined') { var props = JSON.parse(document.getElementById('props').innerHTML); React.render(MyComponent(props), document.getElementById('reactMarkup')); } 所以，基本上你是在服务器和客户端设置了两次状态，不过React会比较差异，在大多数情况下，不会因为重新渲染而影响性能。如果您在Flux架构中采取行动和存储，这个原则将如何工作？在我的组件内我可以这样做： getInitialState: function() { return AppStore.getAppState(); } 但是现在我怎么从服务器设置AppStore的初始状态呢？如果我使用React.renderToString没有传递的属性，它会调用AppStore.getAppState() ，它不会有任何东西，因为我仍然不明白我将如何设置我的商店在服务器上的状态？ 2015年2月5日更新我仍然在寻找一个干净的解决scheme，不涉及使用Fluxible，Fluxxor，Reflux等第三方Flux实现。 2016年8月19日更新使用Redux 。

React renderToString（）性能和cachingReact组件: 我注意到reactDOM.renderToString()方法在服务器上渲染一个大的组件树时开始明显变慢。背景一点背景。该系统是一个完全同构的堆栈。最高级别的App组件呈现模板，页面，DOM元素和更多的组件。看看反应代码，我发现它呈现~1500个组件（这包括任何简单的dom标记，被视为一个简单的组件， <p>this is a react component</p> 。在开发中，渲染〜1500个部件需要200〜300ms。通过去除一些组件，我能够在〜175-225ms内获得1200个组件。在生产中，〜1500组件上的renderToString需要约50-200ms。时间似乎是线性的。没有一个组件是缓慢的，而是多数的总和。问题这会在服务器上造成一些问题。冗长的方法会导致较长的服务器响应时间。 TTFB比应该高很多。使用api调用和业务逻辑，响应应该是250ms，但是使用250ms的renderToString会增加一倍！对SEO和用户不利。另外，作为一个同步方法， renderToString()可以阻塞节点服务器并备份后续请求（这可以通过使用2个独立的节点服务器来解决：1作为Web服务器，1作为服务来完成呈现反应）。尝试理想情况下，在生产中使用ToString需要5-50ms。我一直在做一些想法，但我不确定最好的方法是什么。想法1：caching组件任何标记为“静态”的组件都可以被caching。通过使渲染标记保持caching， renderToString()可以在渲染之前检查caching。如果它find一个组件，它会自动抓取该string。在高级别组件中执行此操作将保存所有嵌套的子组件的安装。您将不得不用当前的rootIDreplacecaching的组件标记的反应rootID。想法2：标记组件简单/哑巴通过将组件定义为“简单”，反应应该能够在渲染时跳过所有的生命周期方法。 React已经为核心反应dom组件（ <p/> ， <h1/>等）做了这个。将很好扩展自定义组件使用相同的优化。想法3：跳过服务器端渲染组件不需要由服务器返回的组件（没有SEO值）可以简单地在服务器上跳过。一旦客户端加载，将clientLoaded标志设置为true ，并将其传递给强制执行重新呈现。 closures和其他尝试到目前为止我唯一的解决scheme是减less在服务器上呈现的组件数量。我们正在看的一些项目包括： React-dom-stream https://github.com/aickin/react-dom-stream （仍在努力实现这个testing）巴别克内联元素https://babeljs.io/docs/plugins/transform-react-inline-elements/ （看起来这是沿着想法2的线）有没有人遇到类似的问题？ […]