Example showing need for FlatList extraData prop is misleading

Đang mở
#5,216 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tài liệu
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react-native
Lĩnh vực
documentation

Hướng nghiên cứu

Bắt đầu với ví dụ thứ hai tại reactnative.dev/docs/flatlist#example, sau đó đọc issue 1529 và pull request 2634 được liên kết để nắm bối cảnh trước đây. So sánh hành vi của ví dụ khi có và không có extraData, đồng thời kiểm tra hướng dẫn hiện tại về FlatList trước khi thay đổi tài liệu. Công việc được xem là hoàn tất khi ví dụ và phần giải thích mô tả chính xác khi nào cần extraData.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Basically https://github.com/react/react-native-website/issues/1529 from 2019 which was closed due to inactivity.

Related: https://github.com/react/react-native-website/pull/2634 which attempted to address this but unfortunately received no attention.

Description

The second example at https://reactnative.dev/docs/flatlist#example is introduced with

By passing extraData={selectedId} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.

But if you delete the extraData prop everything works fine. Since renderItem closes over selectedId, it is recreated whenever selectedId changes (or on every single render if the react compiler is disabled), hence FlatList receives a new prop and re-renders properly as you'd expect.

Which makes me wonder: is there ever a need for extraData? Was it once necessary (perhaps in class component days, or old react native architecture) and is no longer needed?

I'm struggling to think of a scenario in which it's needed, other than an escape hatch for syncing with something outside react, or to opt back in to reactivity after making manual memoizations.

Currently the docs suggest it's necessary to make basic reactivity work, which is confusing.

Documentation version

0.87

Ngôn ngữ chính
MDX
Star
2.2k
Fork
6.3k
Merge trung bình
11 giờ 37 phút
Pull request đã merge (30 ngày)
19

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/react-native-website

Tất cả issue của react/react-native-website

Issue tương tự

Thêm issue về Documentation

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.