React Native 中的函数组件

Question

我正在尝试通过按下来更改 ListItem 的视图。在我的正常 React 组件屏幕中，我有功能性 List 组件和 selectedItemState（仅选择 1 个或不选择任何项目）。在 List 中，很少有功能 ListItem 的组件。问题是项目缺乏重新渲染能力。

我已经按照官方 React 页面上的说明尝试了备忘录，但没有结果。将组件更改为普通组件给出了相同的结果。

屏幕组件：

export default class myScreen extends Component {
    constructor () {
        super ()
        this.state = {
            data: [], // <-- there are my objects
            isDataEmpty: false,
            selectedItemId: ''
        }
    }

    // ... some code

    render () {
        return ( 
                <View style={styles.container}>
                    <List
                        itemList={this.state.data}
                        onItemPress={ /* go to next screen */}
                        onItemLongPress={id => {
                            this.setState({ selectedItemId: this.state.selectedItemId === id ? '' : id })
                        }}
                        selectedItemId={this.state.selectedItemId}
                    />
                </View>
        )
    }
}

列表组件：

const List = props => {
  return (
    <FlatList
      style={style.itemList}
      data={props.itemList}
      renderItem={info => (
        <ListItem
          item={info.item}
          selectedItemId={props.selectedItemId}
          onItemPress={id => props.onItemPress(id)}
          onItemLongPress={id => props.onItemLongPress(id)}
        />
      )}
    />
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId !== '' && (previous.selectedItemId === next.selectedItemId)
}

export default React.memo(List, areEqual)

列表项组件：

const ListItem = props => {
  return (
    <TouchableWithoutFeedback
      onPress={() => props.onItemPress(props.item.id)}
      onLongPress={() => {
        props.onItemLongPress(props.item.id)

      } }>
      <View style={style.listItem}>
          <Image resizeMode='cover' source={props.item.image} style={style.image} />
          <Text>{props.selectedItemId === props.item.id ? 'XXX' : props.item.name}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

const areEqual = (previous, next) => {
  return next.selectedItemId && (next.selectedItemId === next.item.id)
}

export default React.memo(ListItem, areEqual)

按下任何项目后，我希望它的名称更改为 'XXX'。如果项目将被按下两次，所有项目都应处于正常状态

Answer 1

只要项目本身没有变化，相应的列表项目就不会重新呈现。不过，您可以尝试通过更改 extraData flatlist 属性的值来强制重新呈现列表。

React Native 中的函数组件

Function components in react native

javascript

memo

reactjs

react-native