logo标签列表

如果单个数据发生变化，React组件是否会重新渲染？

reactjs
5

我有一个组件，其中包含一个带有两列的table：源和注释。源是不可编辑的，注释具有textinput，用户可以进行编辑。此组件包含一个数组sportsData，该数组填充了两列布局，sportsData中的每个元素表示table的一行。

sportsData = [
    {source="climbing", note="I really like this sport."},
    {source="running", note="Meh, not a fan."},
    {source="biking", note="I need to get a bike."},
    {source="eating", note="Who isn't a fan?"}
];

enter image description here

当用户修改笔记列中的一个字段时，它会更新sportsData状态。
当只有一个字段更新sportsData状态时，这会重新渲染整个表格吗？我认为在有数百/数千行数据时，这将产生负面影响。
3
建议阅读 React 文档中的“React 协调”文章：https://reactjs.org/docs/reconciliation.html。 - norbitrial
2
如果你的表格是一个单一的大组件，那么它将重新渲染整个表格，但如果你有像Table、Row、Cell这样的组件，那么只有单个单元格会重新渲染，但你需要按照这种方式实现，否则不良编码可能会导致大多数组件重新渲染。简而言之，这是可以实现的。 - Zohaib Ijaz
1
我建议您阅读“虚拟化长列表”技术，以渲染大量数据（数百或数千行）的长列表：https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists - SanjiMika
1个回答
0

就像@Zohaib-Ijaz所说，使用不同的组件（行、单元格、表格）不会重新渲染整个表格。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接