meteor - react 性、隔离和列表

标签 meteor

关于 react 性,我有些不明白,特别是列表。我的问题可以通过排行榜示例最轻松地建模(meteor --create example Leaderboard)

首先,将其添加到客户端 js(如 http://listtest.meteor.com/ 中所做的那样):

Template.player.rendered = function () {
    console.log('Player rendered');
}

...然后在运行应用程序时观看控制台。当您切换选定的科学家时,您会注意到每个玩家都会重新渲染,即使不需要。

感谢 IRC 上的一些帮助,我发现子模板或 #isolated 主模板的底部部分如下所示(在 http://listtest2.meteor.com/ 处解决了效率低下的问题。换句话说,当选择不同的玩家时,只有现在重新渲染两个玩家:新选择的和取消选择的。

<head>
  <title>Leaderboard</title>
</head>

<body>
  <div id="outer">
    {{> leaderboard}}
  </div>
</body>

<template name="leaderboard">
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>
  {{#isolate}}
  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give 5 points" />
  </div>
  {{/if}}

  {{#unless selected_name}}
  <div class="none">Click a player to select</div>
  {{/unless}}
  {{/isolate}}
</template>

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

我的问题是:为什么隔离模板的不同部分会导致不同子模板的行为发生变化?

非常感谢。

最佳答案

说明可以在 meteor documenation 中找到:

Reactivity isolation

Each template runs as its own reactive computation. When the template accesses a reactive data source, such as by calling Session.get or making a database query, this establishes a data dependency that will cause the whole template to be re-rendered when the data changes. This means that the amount of re-rendering for a particular change is affected by how you've divided your HTML into templates.

Typically, the exact extent of re-rendering is not crucial, but if you want more control, such as for performance reasons, you can use the {{#isolate}}...{{/isolate}} helper. Data dependencies established inside an #isolate block are localized to the block and will not in themselves cause the parent template to be re-rendered. This block helper essentially conveys the reactivity benefits you would get by pulling the content out into a new sub-template.

关于meteor - react 性、隔离和列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17960366/

相关文章:

javascript - 从子模板更新父模板的动态模板包含

javascript - Meteor eslint 配置用于包开发与全局命名空间导出

debugging - 如何使用webstorm 11通过ecmascript包调试meteor 1.2应用程序

javascript - ReactiveVar 不重新渲染 React 组件

javascript - meteor JS : Callback after template helper was updated

javascript - Meteor react 收集数据

mongodb - 自动增加 meteor 简单模式成员

javascript - 使用 Future 通过异步调用正确处理 Meteor 错误

javascript - 如何在 meteor 页面加载后调用函数

node.js - 在meteor包之后,node.js是 "LISTENING",但没有出现在本地主机上