Example showing need for FlatList extraData prop is misleading
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 48/100
- issue の種類
- ドキュメント
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- react-native
調査の方向性
reactnative.dev/docs/flatlist#example の 2 つ目の例から始め、関連付けられた issue 1529 と pull request 2634 を読んで、これまでの経緯を確認してください。extraData がある場合とない場合の例の動作を比較し、ドキュメントを変更する前に現在の FlatList に関するガイダンスを確認してください。完了の条件は、extraData が必要になる場合を例と説明で正確に示せていることです。
索引モデルが issue の本文から書いたものです。
説明
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}toFlatListwe make sureFlatListitself will re-render when the state changes. Without setting this prop,FlatListwould 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
- 主要言語
- MDX
- スター
- 2.2k
- フォーク
- 6.3k
- 平均マージ
- 18時間 57分
- マージ済み PR（30日）
- 26
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react/react-native-website のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
react/react-native-website#5258 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1〜3時間 初心者へのやさしさ 88/100
react/react-native-website#5217 ·
メンテナーはふだん 1 日以内に返信
-
Integration with Existing Apps: Podfile example does not use `use_react_native!`, is incompleteオープン👋 Good first issue
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
react/react-native-website#2958 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
:ghost: Missing Docs 👋 Good first issue
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
react/react-native-website#889 · コメント 5 件 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 42/100
react/react-native-website#5154 · コメント 6 件 ·
メンテナーはふだん 1 日以内に返信
react/react-native-website の issue をすべて見る
似ている issue
-
📕documentation
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
db-ux-design-system/core-web#8343 ·
メンテナーはふだん 1 日以内に返信
-
enhancement triage/needs-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
heygen-com/hyperframes#4944 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
status:untriaged
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
midnightntwrk/midnight-wallet#790 ·
メンテナーはふだん 1 日以内に返信
-
component:midnight-toolkit status:untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
midnightntwrk/midnight-node#2237 ·
メンテナーはふだん 1 日以内に返信