Node.js 如何在“数据更改时作出反应”中更新视图

我试图学习很多东西，比如：打字脚本、Express和我的新“痴迷”REACT和RXJS

我创建了一个研究这些东西的方法，但我发现了一个问题

“如何在数据更改时在中更新视图”

我在类“IndexRoute”上有一个对象“List”：

从“express”导入{NextFunction，Request，Response，Router}；
从“./model/List”导入{List}；
从“./model/Person”导入{Person}；
从“lodash”中导入*as uu；
/**
*将响应级别列为索引轮换。
*/
导出类索引路由{
专用路由器：路由器；
私人名单：名单{
var person:person=this.list.getPersonByCPF（“111”）；
//设置选项
让选项：对象={
“标题”：“快车”，
“name”：JSON.stringify（this.list.getList（））
};
变量视图：string=“index”；
res.render（视图、选项）；
});
}
专用路由ForPost（）{
//阿迪西奥纳尔乌马新星通过休息
this.router.post（“/”，（请求：请求，回复：响应）=>{
如果（u.isEmpty（请求正文））{
res.status（400）。发送（“Não foi possivel adicionar o elemento，verifique os parametros.”）；
}否则{
变量cpf:string=req.params.cpf；
var person=新的人(
req.body.cpf，
req.body.name，
要求身体年龄
);
此.list.addPerson（人）；
res.send（“Elemento adicionado com successo”）；
}
});
//Visualizar uma人员通信基础无cpf
this.router.post（“/：cpf）”，（请求：请求，回复：响应）=>{
变量cpf:string=req.params.cpf；
var person:person=this.list.getPersonByCPF（cpf）；
如果（我是空的（人））{
决议状态（400）。发送（“Não foi possivel encontar o elemento.”）；
}否则{
res.json（个人）；
}
});
//Exibir体
this.router.post（“/get/list）”，（请求：请求，回复：响应）=>{
var l:Person[]=this.list.getList（）；
如果（u.isEmpty（l））{
res.status（400）。发送（“Lista vazia”）；
}否则{
res.json（l）；
}
});
//Exibir体
this.router.post（“/get/body）”，（请求：请求，回复：响应）=>{
res.send（JSON.stringify（req.body））；
});
}
专用路由Forput（）{
//Atualizar uma个人通信基地无cpf
this.router.put（“/：cpf）”，（请求：请求，回复：响应）=>{
如果（u.isEmpty（请求正文））{
res.status（400）。发送（“Não foi possivel adicionar o elemento，verifique os parametros.”）；
}否则{
变量cpf:string=req.params.cpf；
var person=新的人(
req.body.cpf，
req.body.name，
要求身体年龄
);
if（this.list.updatePersonByCPF（cpf，person））{
res.send（“Elemento Atalizado com successo”）；
}否则{
res.status（400）。发送（“Não foi possivel atualizar o elemento，verify os parametros.”）；
}
}
});
}
专用路由Fordelete（）{
//移除器uma人员通信基地无cpf
this.router.delete（“/：cpf）”，（请求：请求，回复：响应）=>{
变量cpf:string=req.params.cpf；
如果（此.list.removePersonByCPF（cpf））{
res.send（“Elemento removido com successo”）；
}否则{
res.status（400）。发送（“Não foi possivel remover o elemento，verify os parametros.”）；
}
});
}
}

我有反应成分：

var React = require('react');
var DefaultLayout = require('./layouts/default');

class HelloMessage extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
      </DefaultLayout>
    );
  }
}

module.exports = HelloMessage;

var React=require（'React'）；
var DefaultLayout=require（'./layouts/default'）；
类HelloMessage扩展了React.Component{
render（）{
返回(
你好{this.props.name}
);
}
}
module.exports=HelloMessage；

我的目标是：当“IndexRoute”类中的列表更改时，视图也会更改

观察：不使用角度

但我的主要问题是。。。我不知道怎么做，idk如果反应式编程是最好的主意，idk如果我必须使用react native，有很多工具可以使用，但是idk对于这个场景来说什么是最好的

我知道angular可以解决这个问题，但我喜欢学习另一种方法

当“IndexRoute”类中的列表更改时，视图也会更改

组件（从其父组件传入）使用的

道具需要根据路由更改进行更改

更多
我不知道怎么做，idk，如果反应式编程是最好的主意

先走后跑。从hello world开始
我学习了更多，知道如何解决它：

1-停止使用，它不支持客户端上的装载视图

2-我有一个返回列表元素的路由，我将使用fetch（）捕捉它们，并使用setState（）更新视图

谢谢大家，如果有人发现我的解决方案有任何错误，请告诉我进一步改进。：）
 每次列表更改时，您需要将不同的
props
传递到
HelloMessage
，以便重新呈现。我想用fetch获取数据作为状态，用setState更新，我认为这更容易。我在发布之前做过，但很高兴再次记住生命周期，thx。现在，关于解决方案，我正在考虑使用fetch来接收列表、作为状态插入以及使用setInterval验证/更新。但是现在还有另一个问题…setState（）不更新该值。
var React = require('react');
var DefaultLayout = require('./layouts/default');

class HelloMessage extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
      </DefaultLayout>
    );
  }
}

module.exports = HelloMessage;