mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 19:44:13 +00:00
Give complex FlatList example more motivation
Summary: Previously, the example MyListItem never referenced the selected prop, leaving ambiguity about the intention of the demo. By adding a concrete implementation with coloring based on the selected prop, we can see that this is a demo of a multi-select list for batch actions instead of, say, a click-to-navigate nested list. Here is a working Snack demo for future reference: https://snack.expo.io/BkRMRTGB- References #14872 <!-- Thank you for sending the PR! If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos! Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native. Happy contributing! --> Closes https://github.com/facebook/react-native/pull/14957 Differential Revision: D5892186 Pulled By: sahrens fbshipit-source-id: c7b46b5f6eae8f36bd4bda7cbbd354cc22108b42
This commit is contained in:
parent
7d2021ec49
commit
82b4b9b115
@ -233,16 +233,16 @@ type DefaultProps = typeof defaultProps;
|
||||
* renderItem={({item}) => <Text>{item.key}</Text>}
|
||||
* />
|
||||
*
|
||||
* More complex example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
|
||||
* More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
|
||||
*
|
||||
* - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
|
||||
* prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
|
||||
* if the inner `SomeOtherWidget` has no such optimizations.
|
||||
* if the components rendered in `MyListItem` did not have such optimizations.
|
||||
* - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
|
||||
* when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
|
||||
* needs to re-render any items because it is also a `PureComponent` and the prop comparison will
|
||||
* not show any changes.
|
||||
* - `keyExtractor` tells the list to use the `id`s for the react keys.
|
||||
* - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
|
||||
*
|
||||
*
|
||||
* class MyListItem extends React.PureComponent {
|
||||
@ -251,16 +251,20 @@ type DefaultProps = typeof defaultProps;
|
||||
* };
|
||||
*
|
||||
* render() {
|
||||
* const textColor = this.props.selected ? "red" : "black";
|
||||
* return (
|
||||
* <SomeOtherWidget
|
||||
* {...this.props}
|
||||
* onPress={this._onPress}
|
||||
* />
|
||||
* )
|
||||
* <TouchableOpacity onPress={this._onPress}>
|
||||
* <View>
|
||||
* <Text style={{ color: textColor }}>
|
||||
* {this.props.title}
|
||||
* </Text>
|
||||
* </View>
|
||||
* </TouchableOpacity>
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* class MyList extends React.PureComponent {
|
||||
* class MultiSelectList extends React.PureComponent {
|
||||
* state = {selected: (new Map(): Map<string, boolean>)};
|
||||
*
|
||||
* _keyExtractor = (item, index) => item.id;
|
||||
|
Loading…
x
Reference in New Issue
Block a user