渲染之外的反应环境

Question

父母不断收到时间戳更新：

$("window").on("timeUpdate", function(evt) { this.setState({time: evt.time})});

孩子想要使用此信息。

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

在这种情况下非常简单。但是，我需要执行以下操作，而不是仅在time中使用render()信息。

updateSlider() {
  this.state.slider.setValue(this.props.time);
}

在render()内，只要孩子的父母更新this.props.time，就会被动更新。但是，我不确定哪个地方最适合updateSlider()，因此每次this.props.time更新时都会调用它。

Answer 1

（来自我上面的评论）调用slider.setValue()的最佳位置是timeUpdate事件本身的处理程序。这使得函数调用取决于timeUpdate事件而不是this.props.time。

如果必须在子组件中处理（我假设您要将现有应用程序迁移到React），则可以使用componentWillReceiveProps。文档说明了

  

通过使用render()更新状态，将此作为在调用this.setState()之前对prop转换作出反应的机会。可以通过this.props访问旧道具。在此函数中调用this.setState()不会触发其他渲染。