- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我对以下简单 ReactJS 示例的性能感到非常失望。单击项目时,标签(计数)会相应更新。不幸的是,更新大约需要 0.5-1 秒。这主要是由于“重新呈现”了整个待办事项列表。
我的理解是 React 的关键设计决策是让 API 看起来像是在每次更新时重新呈现整个应用程序。它应该获取 DOM 的当前状态并将其与目标 DOM 表示进行比较,进行差异比较并仅更新需要更新的内容。
我做的事情不是最优的吗?我总是可以手动更新计数标签(和静默状态),这将是一个几乎即时的操作,但这消除了使用 ReactJS 的意义。
/** @jsx React.DOM */
TodoItem = React.createClass({
getDefaultProps: function () {
return {
completedCallback: function () {
console.log('not callback provided');
}
};
},
getInitialState: function () {
return this.props;
},
updateCompletedState: function () {
var isCompleted = !this.state.data.completed;
this.setState(_.extend(this.state.data, {
completed: isCompleted
}));
this.props.completedCallback(isCompleted);
},
render: function () {
var renderContext = this.state.data ?
(<li className={'todo-item' + (this.state.data.completed ? ' ' + 'strike-through' : '')}>
<input onClick={this.updateCompletedState} type="checkbox" checked={this.state.data.completed ? 'checked' : ''} />
<span onClick={this.updateCompletedState} className="description">{this.state.data.description}</span>
</li>) : null;
return renderContext;
}
});
var TodoList = React.createClass({
getInitialState: function () {
return {
todoItems: this.props.data.todoItems,
completedTodoItemsCount: 0
};
},
updateCount: function (isCompleted) {
this.setState(_.extend(this.state, {
completedTodoItemsCount: isCompleted ? this.state.completedTodoItemsCount + 1 : this.state.completedTodoItemsCount - 1
}));
},
render: function () {
var updateCount = this.updateCount;
return (
<div>
<div>count: {this.state.completedTodoItemsCount}</div>
<ul className="todo-list">
{ this.state.todoItems.map(function (todoItem) {
return <TodoItem data={ todoItem } completedCallback={ updateCount } />
}) }
</ul>
</div>
);
}
});
var data = {todoItems: []}, i = 0;
while(i++ < 1000) {
data.todoItems.push({description: 'Comment ' + i, completed: false});
}
React.renderComponent(<TodoList data={ data } />, document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
jsFiddle 链接,以防万一:http://jsfiddle.net/9nrnz1qm/3/
最佳答案
如果您执行以下操作,您可以大大缩短时间。为我更新需要 25 毫秒到 45 毫秒。
updateCompletedState: function (event) {
var isCompleted = event.target.checked;
this.setState({data:
_.extend({}, this.state.data, {
completed: isCompleted
})
});
this.props.completedCallback(isCompleted);
},
shouldComponentUpdate: function(nextProps, nextState){
return nextState.data.completed !== this.state.data.completed;
},
(这段代码有很多值得怀疑的地方,daniula 指出了其中的一些)
关于javascript - react 。呈现和更新 1500 个 <li> 元素的简单列表时非常慢。我认为 VirtualDOM 很快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27952901/
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
class Person def name puts "Doharey" end end puts Person.class #=> this out puts Class puts
在 PHP 中,($myvariable==0)当 $myvariable 为零时,表达式的值为真;当 $myvariable 为 null 时,此表达式的值也为 true。如何排除第二种情况?我的意
正文 Oracle的一顿猛如虎操作,让开发者彻底失去了Java EE。Eclipse基金会则自立门户,另起炉灶开启Jakarta EE项目。 对于Jakarta EE,从它
我是 python 新手,建议我使用 Canopy。我正在努力跟进 with this tutorial ,但我陷入了 mahotas.imread 行。我收到一个错误,说以这个结尾: Full er
上下文是我们想要跟踪应用程序的用户行为,因为它具有不同的功能。 为此,我们创建了一个自定义 Angular Directive(指令),例如myFunctionality并将 HTML 部分包装到此指
我正在尝试在文本字段中实现 google Places api 的自动完成功能。这是我的代码: $(document).ready(function() { initialize(){ v
我在 Glassfish 3.1.1 中配置了一个新的 jdbcRealm 并打开了 FINEST 日志记录,当我尝试使用用户名和密码登录时,我得到以下信息。它提示我的 Web 应用程序映射到的领域是
问题是,即使我将线程设置为“thrd.IsBackground = false”,iis 也不认为它正在运行,即使这是一个长时间运行的进程。如果我不关闭应用程序池的空闲关闭,它将关闭,因为它认为它是空
我正在使用 OpenJDK 8(从 https://jdk.java.net/java-se-ri/8 下载并解压,添加到 PATH),并且遇到了证书错误。 经过调查,我意识到 cacerts 存在问
我基于 Firebase 制作了简单的后期制作项目。我将帖子保存到 Firebase 中,如下所示: let data = UIImageJPEGRepresentation(newPostImage
我觉得还是先说明情况比较好。 情况 我正在编写一些软件来过滤 Set 的 File。 过滤器如下:如果文件未隐藏,则将其添加到新的 Set。 问题在于 File.isHidden() 的当前行为如下:
我创建了一个 C++ DLL 函数,它使用多个数组来处理最终的图像数据。我正在尝试通过引用传递这些数组,进行计算,然后通过预分配数组中的引用将输出传回。在该函数中,我使用了 Intel Perform
我在 python 中有一个小应用程序,除了这个小问题之外,它工作得很好:它应该连续运行一个循环,直到用户通过按钮告诉它停止,但是当我点击开始按钮时,Windows 告诉我它不是回应。现在,如果我编写
代码运行正常,但我怎么会得到这个错误日志 错误日志: 08-28 08:44:24.281: E/MediaPlayer(32454): mOnVideoSizeChangedListener is
我有一个使用 Karma+Jasmine 和 JSHint 的 Grunt 设置。每当我在我的规范文件上运行 JSHint 时,我都会收到一系列“未定义”错误,其中大部分是针对 Jasmine 的内置
将以下代码保存到文件中,Ubuntu 14.04 正确地意识到它是 bash: #!/usr/bin/env bash awk '{print $1 $2}' my_file 然而,向 awk 添加关
以下代码返回 false import inspect print(inspect.isbuiltin(map)) 但是 map 功能在"built-in" functions下列出. 为什么会这样?
这是一段常见的示例代码: while (1) { print "foo\n"; } 永远打印“foo”。 perl foo.pl foo foo foo ... 和 while (0) { p
我对 Haskell 比较陌生,来自 F#(一种 Microsoft 语言)。 我已经从脚手架创建了一个 Yesod 项目,稍微玩了一下,调整了一些东西,但随后它停止工作,并显示此错误消息(在所有模块
我是一名优秀的程序员,十分优秀!