- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在学习使用 react.js,但在使用事件处理程序时遇到了一些问题。最后一个问题是:是否可以使用服务器端渲染并将事件处理程序自动发送到客户端?
这是我的例子:我有一个 index.jsx 渲染服务器端并发送到客户端
var React = require("react");
var DefaultLayout = require("./layout/default");
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
var IndexComponent = React.createClass({
render: function(){
return (
<DefaultLayout title={this.props.name}>
<div>
<h1>React Test</h1>
</div>
<div id="testButton">
<LikeButton/>
</div>
<script type="text/babel" src="/js/react.js"></script>
</DefaultLayout>
)
}
});
但是“Like Button”没有任何交互作用。为了让它在点击时做一些事情,我必须添加这个代码客户端。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('testButton')
);
我刚开始使用 react.js,也许我只是在这里遗漏了一些主要概念。但是为什么 react.js 在渲染页面服务器端时不只是创建代码(我现在必须手动添加到客户端)?像这样,我有冗余代码,感觉在大型应用程序中这将是一团糟。至少 react.js 足够聪明,不会绘制两个 LikeButton,而是将创建的服务器端“绑定(bind)”到客户端组件。
最佳答案
这种行为是因为服务器端渲染到底是什么。首先,您必须在客户端和服务器端运行完全相同的代码。这就是所谓的同构应用程序。一种同时在服务器和客户端上运行。
所以,在做 ReactDOM.renderToString(<Component>)
只有 HTML 呈现为字符串。评估组件的渲染方法并生成初始渲染所需的 HTML。
当在客户端运行相同的代码时,react 会查找呈现的 HTML 并将 JS 附加到所需的位置。 React 这种方式很聪明,它不会在客户端重新渲染所有内容。只需评估代码并根据 react-id
确定将代码附加到何处每个 DOM 元素都给出。 (如果你检查元素任何反应应用程序,你会 react-id)
现在有人可能会问,两次渲染相同的东西有什么好处?
答案是perceived loading time
由用户。并且对于禁用 JS 的用户也有一些最低限度的查看。
客户端呈现的应用程序
这就是单独客户端呈现的应用程序的工作方式。 (客户端也呈现 React 应用程序)
用户只会在所有骨架 HTML、JS 包(通常非常大)以及获取和评估数据之后才能看到内容。这意味着用户通常必须盯着微调器或加载屏幕一会儿,直到所有内容加载完毕。
同构应用程序(在客户端和服务器上运行)
同构应用程序的工作原理,
在这种情况下,服务器会通过评估您的组件来生成 完整 HTML。下载 HTML 后,用户将立即看到内容。 虽然只有在 JS 包也被下载和评估后,该应用才能完全运行。所以JS要两边都跑
因此,用户看到内容的速度比以前快得多。因此,感知加载时间大幅减少。
关于javascript - React.js 服务器端渲染和事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36233309/
我在使用 Jade 和 express 时遇到了一些问题。这是 serder 端: router.get('/login', function (req, res) { res.status(2
是否可以使用 JavaScript 服务器端,从而在某些核心计算中不会显示在页面源代码中? 我正在开发一款游戏,代码的一个关键部分只需要在服务器端计算然后传回客户端。 我的整个游戏都是用 Javasc
我正在寻找有关如何使用 ExtJS 4 实现安全页面的信息。我所说的安全页面是指用户将使用 Siteminder (SSO) 登录我们的网站,因此我们将拥有用户的身份。然后我们将通过进行数据库/LDA
我的 Centos 7 服务器正在运行 apache 2.4.6,并且正在使用 mod_wsgi 提供 django webapp。我的问题是我无法从另一台计算机的浏览器访问服务器 url。我没有从
我们收到了客户的请求,要求我们基于 ExtJS 框架构建 Web 应用程序。我查看了互联网,发现 ExtJs 只是一个客户端 javascript 控件,但我认为 Web 应用程序也必须具有服务器端
我有三个组件。 组件一包含组件二和三。 组件二是一个列表。 组件三用于向数据库添加项目。 当我将一个项目保存到数据库时,我想更新组件二中的列表。 我怎么做? 最佳答案 设想 让我们假设:
欢迎, 我正在寻找能使我以尽可能高的格式下载youtube视频的youtube api。 几年前,这项工作更为简单,因为url拥有关于质量的信息,例如“fmt = 22”或“fmt = 6”,我们现在
我想将电子邮件 x@x.com 的用户密码设置为“an”。但代码不起作用。这是我的云代码: Parse.Cloud.define('testSetPasswordForUser', functio
正在阅读http://cocoawithlove.com/2010/03/streaming-mp3aac-audio-again.html这篇文章,想知道如何在服务器端实现它,是否像将文件放在htd
我有一个使用一些 css/javascript 选项卡的 php 脚本,它们在我的本地服务器上运行,但当我上传到我的在线服务器时则不起作用。 只是想知道是否有人知道为什么会出现这种情况?所有路径都
是否可以从 JavaScript 脚本获取服务器端页面的源代码?我希望能够获取服务器上同一文件夹中的页面的源代码。除了javascript之外,是否可以不使用任何其他东西? 最佳答案 如果您想从 ja
.NET 4.0 我正在寻找在我们的服务器上生成Word文档的最简单方法。 局限性: 服务器端 我不想在服务器上安装word 数据源是XML 我试图用XSLT生成快速简单的DOCX,但是我可以找到的用
我正在使用 native jQuery 验证库来验证在联系表单中输入的电子邮件地址。由于这是一个表达式引擎站点,因此我使用其电子邮件验证器作为服务器端备份。 当我输入 test@b.c 时,jQuer
我使用带有服务器端处理的数据表来显示数万行。我需要通过复选框过滤这些数据。我能够制作一个工作正常的复选框,但我不知道如何添加多个复选框以协同工作。我找到了 similar solution在这里,但我
我正在尝试编写一个消息传递应用程序,并且我能够发送消息(显示为服务器客户端正确显示消息)但随后将我的客户端踢出服务器。服务器打印以下错误: java.io.EOFException at java.i
如果设备是移动设备,如何防止侧边栏加载服务器端资源?我了解如何通过 CSS 隐藏,但我更感兴趣的是防止对服务器的调用。 最佳答案 WordPress有一个名为wp_is_mobile()的函数它将检查
我有一个返回 text/event-stream 数据的网址,因此我尝试连接并打印我找到的所有内容: var url = "..." var source = new EventSource(url)
我得到这样的错误列表:{ error: [ "Email is required", "First Name is required"] } 我需要如何修改它,以获取包含字段名称的列表? public
我正在尝试使用 ASIFormDataRequest 将数据发送到 ASP.net 服务器端。我创建了一个aspx页面。目前我可以得到这两个纯文本。但是我不知道如何通过 Request.Form 在
我在 ${host}/api/graphql 有一个可通过 POST 访问的快速 graphql 端点。 在那条路线上,我有身份验证中间件,如果用户未登录,我想重定向到登录页面。 看起来有点像这样。
我是一名优秀的程序员,十分优秀!