0

我是 React 新手，正在开发一个应用程序（使用 React 钩子），它基本上是 Trello 板或看板板的克隆，因此一组列表显示为列，其中每个列表都有许多卡片。用户可以添加新列表并将新卡片添加到列表中（除了将卡片从列表拖放到列表中），这就是我遇到问题的地方。

当这个视图加载时，我用来自数据库的一个对象填充一个状态变量lists，列表对象数组的形式，每个对象数组都有一个卡片对象数组，基本上结构如下：

[
  { 
    listId: 0, 
    listTitle: 'List Title', 
    cards: [
      {
        cardId: 0,
        cardText: 'some text'
      },
      {
        cardId: 1,
        cardText: 'some text'
      }
    ]
  },
  { 
    listId: 1, 
    listTitle: 'Another title', 
    cards: [ ... ]
  },
  { 
    listId: 2, 
    listTitle: 'Yet another', 
    cards: [ ... ]
  }
]

我负责这个视图的组件基本上是这样的：

function Board() {

  const [lists, setLists] = useState([]);

  const addList = (listTitle) => {
     // adds list to db and updates lists state with new array
  }

  const addCard = (listId, cardText) => {
    // adds card to db and updates lists state with new array
  }

  useEffect(() => {
    api.getLists()
    .then((listData) => {
      setLists(listData)
    })
    .catch((error) => {
      console.log(error);
    })
    
  }, []);

  return (
    <main>

      {lists.map((list) => <List key={list.id} listId={list.id} title={list.title} cards={list.cards} addCard={addCard} />)}

      <AddElementPanel addElement={addList} />
    </main>
  );
}


function List({ title, cards, listId, addCard }) => {
  return (
    <section>
      <h2>{title}</h2>
      <ul>
        {listCards.map((card) => <Card key={card.id} text={card.text} />)}
      </ul>
      <AddElementPanel listId={listId} addElement={addCard} />
    </section>
  );
}


function Card({ text }) {
  return (<li>{text}</li>);
}

我的问题是，当用户想要添加新卡片或列表时，数据会被插入到数据库中，但我知道如何显示更改的唯一方法是执行类似setList[...newList]的操作，这当然会导致每个列表和卡片重新渲染。这对我来说似乎并不理想，因为如果我向一个列表添加新列表或新卡片，未更改的列表将重新呈现。我知道这对于当前的设置来说没什么大不了的，但是如果子组件中需要发生一些非常昂贵的事情，或者有大量数据，那么如何更好地构建呢？

从研究来看，似乎像 Redux 或其他状态管理库这样的东西可能会更有效地管理这样的状态，尽管我不能 100% 确定这对于像这样尚未学习 Redux 的情况是否准确。我也很好奇是否有更简单的解决方案，或者更好的方法来首先进行设置以防止这种行为？我尝试将 List 组件包装在 React.memo 中，但这似乎没有什么不同，所以我要么做错了，要么没有考虑到影响它的东西。如果有人能指出我正确的方向，我将不胜感激。

4

1 回答 1

0

您是否进行过任何性能测试，让您怀疑您使用此代码进行了不必要的重新渲染？AFAIK，只要您在组件中使用唯一键， React 的差异算法就会处理这个问题。

事实上，useMemo不应该在这里添加任何改进，因为每次列表/卡片数组更改时，它的依赖关系都会改变。

于 2021-11-04T21:51:14.383 回答