Question

我是reactJS的新手，我应该创建一个树组件来加载带有静态数据或动态数据的数据，无论如何，我想让它对用户透明，也就是说，用户只支持数据和树组件负责将数据转换为树节点数据。

数据用户支持：

[{
  id:1,
  name:'Node 1'
},
{
  id:2,
  name:'Node 2'
}]

翻译了数据树组件：

[{
  key:1,
  nodeText:'Node 1',
  selected:true
 },
 {
  key:2,
  nodeText:'Node 2',
  selected:false
}]

用户可能会在一段时间内更改树数据，因此我应该在渲染功能中反复翻译。

class Tree{
  render(){
     // execute the translation between data user supported to node data
     this.translateData();

     // logic to create nodes.
     return '<ul>node element</ul>';
  }
}

多次执行翻译很糟糕。实际上有一些工作要做以避免这种情况：（1）公开refs并定义一个重载函数并通过refs调用它。

（2）用'shouldComponentUpdate'，但是有很多树节点数据，所选择的，可检查的也应该重新渲染树，这个功能很难控制。

（3）使树更简单，只显示树节点数据，翻译应由用户完成，而不是树本身。但我想让树丰富的功能处理这种情况。

正是因为用户可以随时支持它，它变得复杂。如果用户仅在初始化时支持，它将只在构造函数或componentDidMount（）中处理它。但由于数据更改，很难刷新或强制重新加载。我也想用refs重装它，这是不推荐的。

如果有人遇到这种情况，请支持一些建议或解决方案吗？

如何在React中提高组件的渲染性能？

0 个答案: