React renderToString（）性能和缓存React组件

作者: 满目山河
发布时间: 2024-12-26 11:26:58 (1月前)
转自：

4 条回复

0#
回复此人
老人与海 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> 想法1：缓存组件 </H2> <P> 的<strong> 更新1 </强> ：我在底部添加了一个完整的工作示例。它将组件缓存在内存和更新中 <code> data-reactid </code> 。 </p> <P> 这实际上可以很容易地完成。你应该 <a href="https://en.wikipedia.org/wiki/Monkey_patch" rel="noreferrer"> 猴补丁 </A> <code> ReactCompositeComponent </code> 并检查缓存版本： </p> <pre> <code> import ReactCompositeComponent from 'react/lib/ReactCompositeComponent'; const originalMountComponent = ReactCompositeComponent.Mixin.mountComponent; ReactCompositeComponent.Mixin.mountComponent = function() { if (hasCachedVersion(this)) return cache; return originalMountComponent.apply(this, arguments) } </code> </pre> <P> 你应该在你面前这样做 <code> require('react') </code> 您应用中的任何位置。 </p> <P> 的<strong> Webpack说明： </强> 如果你使用类似的东西 <code> new webpack.ProvidePlugin({'React': 'react'}) </code> 你应该把它改成 <code> new webpack.ProvidePlugin({'React': 'react-override'}) </code> 在哪里进行修改 <code> react-override.js </code> 和出口 <code> react </code> （即 <code> module.exports = require('react') </code> ） </p> <P> 一个在内存和更新中缓存的完整示例 <code> reactid </code> 属性可能是这样的： </p> <pre> <code> import ReactCompositeComponent from 'react/lib/ReactCompositeComponent'; import jsan from 'jsan'; import Logo from './logo.svg'; const cachable = [Logo]; const cache = {}; function splitMarkup(markup) { var markupParts = []; var reactIdPos = -1; var endPos, startPos = 0; while ((reactIdPos = markup.indexOf('reactid="', reactIdPos + 1)) != -1) { endPos = reactIdPos + 9; markupParts.push(markup.substring(startPos, endPos)) startPos = markup.indexOf('"', endPos); } markupParts.push(markup.substring(startPos)) return markupParts; } function refreshMarkup(markup, hostContainerInfo) { var refreshedMarkup = ''; var reactid; var reactIdSlotCount = markup.length - 1; for (var i = 0; i <= reactIdSlotCount; i++) { reactid = i != reactIdSlotCount ? hostContainerInfo._idCounter++ : ''; refreshedMarkup += markup[i] + reactid } return refreshedMarkup; } const originalMountComponent = ReactCompositeComponent.Mixin.mountComponent; ReactCompositeComponent.Mixin.mountComponent = function (renderedElement, hostParent, hostContainerInfo, transaction, context) { return originalMountComponent.apply(this, arguments); var el = this._currentElement; var elType = el.type; var markup; if (cachable.indexOf(elType) > -1) { var publicProps = el.props; var id = elType.name + ':' + jsan.stringify(publicProps); markup = cache[id]; if (markup) { return refreshMarkup(markup, hostContainerInfo) } else { markup = originalMountComponent.apply(this, arguments); cache[id] = splitMarkup(markup); } } else { markup = originalMountComponent.apply(this, arguments) } return markup; } module.exports = require('react'); </code> </pre> </DIV>

编辑
1#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 它不完整的解决方案我有同样的问题，我的反应同构应用程序，我使用了几件事。 </p> <P> 1）在nodejs服务器前使用Nginx，并在短时间内缓存渲染的响应。 </p> <P> 2）在显示项目列表的情况下，我仅使用列表的子集。例如，我将仅渲染X项以填充视口，并使用Websocket或XHR在客户端加载列表的其余部分。 </p> <P> 3）我的一些组件在服务器端呈现中是空的，只会从客户端代码（componentDidMount）加载。这些组件通常是图形或配置文件相关的组件。这些组件通常在SEO的观点上没有任何好处 </p> <P> 4）关于SEO，从我的经验6个月与同构应用程序。 Google Bot可以轻松读取客户端React Web页面，因此我不确定为什么我们会厌烦服务器端渲染。 </p> <P> 5）保持 <code> <Head > </code> 和 <code> <Footer> </code> 作为静态字符串或使用模板引擎（ <a href="https://github.com/stevenvachon/handlebars-react" rel="noreferrer"> Reactjs-handellbars </A> ），并只渲染页面的内容，（它应该保存一些渲染组件）。如果是单页应用，您可以更新每个导航内的标题说明 <code> Router.Run </code> 。 </p> </DIV>

编辑
2#
回复此人
不浪漫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为 <a href="https://github.com/alt-j/fast-react-render" rel="nofollow"> 快速反应的渲染 </A> 可以帮助你。它可以将服务器渲染性能提高三倍。 </p> <P> 为了尝试它，您只需要安装包并将ReactDOM.renderToString替换为FastReactRender.elementToString： </p> <pre> <code> var ReactRender = require('fast-react-render'); var element = React.createElement(Component, {property: 'value'}); console.log(ReactRender.elementToString(element, {context: {}})); </code> </pre> <P> 你也可以使用 <a href="https://github.com/alt-j/fast-react-server" rel="nofollow"> 快速反应服务器 </A> 在这种情况下，渲染速度将是传统反应渲染速度的14倍。但是，为此，必须使用它来声明要呈现的每个组件（请参阅fast-react-seed中的示例，如何为webpack执行此操作）。 </p> </DIV>

编辑

登录后才能参与评论