我对以下简单的ReactJS示例的性能感到非常失望.单击某个项目时,标签(计数)会相应更新.不幸的是,这需要大约0.5-1秒来更新.这主要是由于"重新渲染"整个待办事项列表.
我的理解是,React的关键设计决策是使API看起来像是在每次更新时重新呈现整个应用程序.假设获取DOM的当前状态并将其与目标DOM表示进行比较,执行diff并仅更新需要更新的内容.
我做的事情不是最优的吗?我总是可以手动更新计数标签(以及静默状态),这将是一个几乎是即时的操作,但这会消除使用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> …Run Code Online (Sandbox Code Playgroud)鉴于下面的迷你Vuejs应用程序.
当我单击其中一个增量/减量按钮时,"计数器"组件中的值会更新,但"字母"中的值不会更新.
关于如何在这两个组件之间共享相同数据以便它们自动更新的任何想法?
var counter = Vue.extend({
props: ['start'],
template: '#counter',
data: function() {
return {
value: this.start
}
},
methods: {
increment: function() {
this.value++
},
decrement: function() {
this.value--
}
}
});
var alphabet = Vue.extend({
props: ['value'],
template: '#alphabet',
data: function() {
return {
value: 0
}
}
});
new Vue({
el: '#app',
data: {
val: 5
},
components: {
counter: counter,
alphabet: alphabet
}
});Run Code Online (Sandbox Code Playgroud)
<script id="counter" type="text/template">
<button @click="increment">+</button> {{ value }}
<button @click="decrement">-</button>
</script> …Run Code Online (Sandbox Code Playgroud)我正在尝试开发一个用于在 Android 平台上发送和接收电子邮件的小应用程序。目前我一直在使用 Javamail api 尝试发送电子邮件。但是我想,如果我使用 javamail 实现我的应用程序,我将如何接收电子邮件并从我的应用程序收到我收到的通知?这与在 Android 上找到的 Service 和 Provder 类有关吗?我是一个完整的 android 初学者。
我也试过这里找到的这段代码:
没有运气,因为应用程序不起作用。
懒惰评估被认为是一种延迟流程直到第一次需要的方式.这往往会避免重复评估,这就是为什么我认为这样做的速度要快得多.像Haskell(和JavaScript ..?)这样的函数语言内置了这个功能.
但是,我不明白为什么和为什么其他"正常"方法(即相同的功能但不使用惰性评估)更慢..这些其他方法如何以及为什么重复进行评估?有人可以通过提供简单的例子并解释每种方法的机制来详细说明这一点吗?
另外,根据Wikipedia关于懒惰评估的页面,这些被认为是这种方法的优点:
但是,我们可以控制所需的计算并避免重复相同的计算吗?(1)我们可以使用ie链接列表来创建无限数据结构(2)我们可以做(3)已经.. ??? 我们可以定义类/模板/对象并使用它们而不是原语(即JavaScript).
另外,在我看来(至少从我见过的案例中),懒惰的评估与递归和使用"头部"和"尾部"(以及其他)概念密切相关.当然,有些情况下递归是有用的,但懒惰的评价不仅仅是......?不仅仅是一种解决问题的递归方法..?Streamjs是一个JavaScript库,它使用递归和一些其他简单的操作(头部,尾部等)来执行惰性求值.
看来我无法理解它...
在此先感谢任何贡献.
recursion performance haskell lazy-evaluation lazy-initialization
免责声明:我是ReasonML初学者.
我最近开始使用ReasonML,我发现与vanilla JavaScript相比,性能有很大差异.这是我反对简单解谜功能的例子(谜题取自:https://adventofcode.com/2015/day/1)
ReasonML
let head = str =>
switch (str) {
| "" => ""
| _ => String.sub(str, 0, 1)
};
let tail = str =>
switch (str) {
| "" => ""
| _ => String.sub(str, 1, String.length(str) - 1)
};
let rec stringToList = str =>
switch (str) {
| "" => []
| _ => [[head(str)], tail(str) |> stringToList] |> List.concat
};
let rec findFloor = code =>
switch (head(code)) …Run Code Online (Sandbox Code Playgroud) 根据返回类型,Signal(Int,Int)不会被识别为(Int,Int)的元组.
请考虑以下代码:
import Graphics.Element exposing (..)
import Mouse
relativeMouseElement : (Int, Int) -> Element
relativeMouseElement mp = show (fst mp - 1000, snd mp - 1000)
relativeMouseTuple : (Int, Int) -> (Int, Int)
relativeMouseTuple mp = (fst mp - 1000, snd mp - 1000)
main =
-- Signal.map relativeMouse Mouse.position
relativeMouseTuple Mouse.position
Run Code Online (Sandbox Code Playgroud)
Signal.map relativeMouse Mouse.position 工作正常,显示(-1000,-1000)到浏览器,并根据鼠标移动调整值.
relativeMouseTuple Mouse.position这虽然不起作用.我得到的复杂错误如下:
Function `relativeMouseTuple` is expecting the argument to be:
( Int, Int )
But it is:
Signal ( Int, Int )
Run Code Online (Sandbox Code Playgroud)
我觉得这很奇怪.在这两种情况下,第一个参数是Signal(Int,Int),在第二种情况下,它导致类型错误. …
performance ×3
javascript ×2
android ×1
broadcasting ×1
bucklescript ×1
components ×1
dom ×1
elm ×1
elm-signal ×1
email ×1
haskell ×1
model ×1
provider ×1
reactjs ×1
reason ×1
recursion ×1
service ×1
vue.js ×1