小编ska*_*ay-的帖子

ReactJS.渲染和更新1500个<li>元素的简单列表时速度相当慢.我以为VirtualDOM很快

我对以下简单的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)

javascript performance dom reactjs

10
推荐指数
2
解决办法
1万
查看次数

在Vuejs中跨不同组件共享数据

鉴于下面的迷你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)

components model vue.js

5
推荐指数
1
解决办法
9289
查看次数

在 android 上开发电子邮件客户端应用程序

我正在尝试开发一个用于在 Android 平台上发送和接收电子邮件的小应用程序。目前我一直在使用 Javamail api 尝试发送电子邮件。但是我想,如果我使用 javamail 实现我的应用程序,我将如何接收电子邮件并从我的应用程序收到我收到的通知?这与在 Android 上找到的 Service 和 Provder 类有关吗?我是一个完整的 android 初学者。

我也试过这里找到的这段代码:

Android 编程 - 发送邮件

没有运气,因为应用程序不起作用。

email provider service android broadcasting

4
推荐指数
1
解决办法
2万
查看次数

懒惰评估:为什么它更快,优势与劣势,机制(为什么它使用更少的CPU;示例?)和简单的概念证明示例

懒惰评估被认为是一种延迟流程直到第一次需要的方式.这往往会避免重复评估,这就是为什么我认为这样做的速度要快得多.像Haskell(和JavaScript ..?)这样的函数语言内置了这个功能.

但是,我不明白为什么和为什么其他"正常"方法(即相同的功能但不使用惰性评估)更慢..这些其他方法如何以及为什么重复进行评估?有人可以通过提供简单的例子并解释每种方法的机制来详细说明这一点吗?

另外,根据Wikipedia关于懒惰评估的页面,这些被认为是这种方法的优点:

  1. 通过避免不必要的计算以及评估复合表达式中的错误条件来提高性能
  2. 构建潜在无限数据结构的能力
  3. 将控制流(结构)定义为抽象而不是基元的能力

但是,我们可以控制所需的计算并避免重复相同的计算吗?(1)我们可以使用ie链接列表来创建无限数据结构(2)我们可以做(3)已经.. ??? 我们可以定义类/模板/对象并使用它们而不是原语(即JavaScript).

另外,在我看来(至少从我见过的案例中),懒惰的评估与递归和使用"头部"和"尾部"(以及其他)概念密切相关.当然,有些情况下递归是有用的,但懒惰的评价不仅仅是......?不仅仅是一种解决问题的递归方法..?Streamjs是一个JavaScript库,它使用递归和一些其他简单的操作(头部,尾部等)来执行惰性求值.

看来我无法理解它...

在此先感谢任何贡献.

recursion performance haskell lazy-evaluation lazy-initialization

4
推荐指数
2
解决办法
4216
查看次数

针对命令式vanilla JavaScript的ReasonML性能

免责声明:我是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)

javascript performance reason bucklescript

2
推荐指数
1
解决办法
313
查看次数

在某些情况下,Signal(Int,Int)不被识别为(Int,Int)元组

根据返回类型,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),在第二种情况下,它导致类型错误. …

elm elm-signal

1
推荐指数
1
解决办法
46
查看次数