问提供反应性数据的源
EN

Stack Overflow用户

提问于 2020-04-12 10:43:57

回答 1查看 90关注 0票数 1

上下文：，我目前的Meteor项目是一个教学应用程序，老师可以远程观察学习者在做什么。有很多不同的观点，学习者可以使用，所以我需要区分数据共享方面和观点本身。同样的视图将显示在教师的设备上，显示由学生的行为控制。

问题：*是我使用声音的技术吗？*当组件的输入没有改变时，如何防止它被重新呈现？

详细信息：我已经创建了一个基本的原型(见下文)。它使用Source实例(应用程序本身将通过MongoDB集更新该实例)为视图组件提供反应性数据。在我的原型中，我只生成随机数据。

我有过两个惊喜。

一个:我发现，如果我在源中的一个.get()上调用ReactiveVar，这就足以触发Tracker对象读取新值，即使我返回一个完全非反应性变量的值。可以预期，如果ReactiveVar的值没有变化，跟踪器将忽略对非反应性变量的任何更改。

二:跟踪器获得的值被转发给组件sprops`‘，即使该值不变，也会导致重呈现。

代码：

import React, { Component } from 'react'
import { ReactiveVar } from 'meteor/reactive-var'
import { withTracker } from 'meteor/react-meteor-data'


/// SOURCE ——————————————————————————————————————————————————————————

class Source {
  constructor() {
    this.updateData = this.updateData.bind(this)
    this.updateData()
  }

  updateData() {
    const reactive = Math.floor(Math.random() * 1.25) // 4 times as many 0s as 1s
    data.set(reactive)
    console.log("reactive:", reactive)

    this.usable = ["a", "b", "c"][Math.floor(Math.random() * 3)]
    console.log("usable:  ", this.usable)

    setTimeout(this.updateData, 1000)
  }

  get() {       
    data.get() // We MUST get a reactive value to trigger Tracker...
    return this.usable // ... but we CAN return a non-reactive value
  }
}


let data = new ReactiveVar(0)
const source = new Source()


/// COMPONENT ———————————————————————————————————————————————————————

class Test extends Component{

  render() {
    console.log("rendered:", this.props.data)

    return (
      <div>
        {this.props.data}
      </div>
    )
  }
}

export default withTracker(() => {
  const data = source.get()
  console.log("UPDATE:  ", data)
  console.log("")

  const props = {
    data
  }

  return props
})(Test)

示例控制台输出，附带注释：

reactive: 1
usable:   b
UPDATE:   b

rendered: b <<< initial value rendered
reactive: 1 <<< no change to reactive value...
usable:   a <<< ...so usable value is ignored
reactive: 0 <<< reactive value changes...
usable:   c <<< ... so an update is sent to the component
UPDATE:   c

rendered: c <<< c rendered
reactive: 0 <<< no change to the reactive value...
usable:   c
reactive: 0
usable:   b
reactive: 0
usable:   c
reactive: 0
usable:   b
reactive: 1 <<< but when reactive value changes
usable:   c <<< the usable value does not
UPDATE:   c

rendered: c <<< c re-rendered, although unchanged