关于 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/