列表(Lists)

大部分 UI 都是展示列表数据中不同 item 的列表结构。这是一个天然的层级。

为了管理列表中的每一个 item 的 state ,我们可以创造一个 Map 容纳具体 item 的 state。

  1. function UserList(users, likesPerUser, updateUserLikes) {
  2. return users.map(user => FancyNameBox(
  3. user,
  4. likesPerUser.get(user.id),
  5. () => updateUserLikes(user.id, likesPerUser.get(user.id) + 1)
  6. ));
  7. }
  8. var likesPerUser = new Map();
  9. function updateUserLikes(id, likeCount) {
  10. likesPerUser.set(id, likeCount);
  11. rerender();
  12. }
  13. UserList(data.users, likesPerUser, updateUserLikes);

注意:现在我们向 FancyNameBox 传了多个不同的参数。这打破了我们的 memoization 因为我们每次只能存储一个值。更多相关内容在下面。