javascript - 为什么 React 不更新 DOM？

Question

为什么 React 不为以下代码更新 DOM？我希望突出显示的项目在状态更改时更改，但这并没有发生。

https://gist.github.com/davorb/abf505bac4f3f67f30bffffc539abf0a

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList
} from 'react-native';

const food = [
  {
    key: 'Sushi'
  },
  {
    active: true,
    key: 'Burgare'
  },
  {
    key: 'Pizza'
  },
  {
    key: 'Pasta'
  }
];

const FoodList = (props) => {
  console.log(props.selected === food[0].key);
    return (
      <FlatList
        data={food}
        renderItem={({item}) =>
            <View style={styles.item}>
              <Text
                      style={item.key === props.selected ? styles.activeItem : styles.textItem}>
                      {item.key}
              </Text>
            </View>}
        />
    )
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.i = 0;
    this.state = {
      selected: food[this.i]
    };

    setInterval(() => {
      this.i = (this.i + 1) % food.length;
      this.setState(previousState => {
        return {
          selected: food[this.i]
        };
      });
    }, 1000);
  }

  renderFoodlist() {
    return (
        <FoodList selected={this.state.selected.key} />
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Shake your phone to open the developer menu.</Text>
        {this.renderFoodlist()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 22,
  },
  textItem: {
    fontSize: 24,
  },
  activeItem: {
    fontSize: 24,
    backgroundColor: 'red',
  },
});

Answer 1

来自 https://facebook.github.io/react-native/docs/flatlist.html :

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.

查看此示例并注意当您注释掉 extraData 时会发生什么(它不会更新)。

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableHighlight,
} from 'react-native';

const food = [
  {
    key: 'Sushi'
  },
  {
    key: 'Burgare'
  },
  {
    key: 'Pizza'
  },
  {
    key: 'Pasta'
  }
];

class FoodList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: 0,
    };
  }

  _renderItem(item) {
    return (
      <TouchableHighlight onPress={() => this.setState({ selected: item.index })}>
        <View>
          <Text style={this.state.selected === item.index ? styles.activeItem : styles.textItem}>
            {item.index} {item.item.key}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }

  render() {
    return (
      <View>
        <Text>{JSON.stringify(this.state)}</Text>
        <FlatList
          data={food}
          keyExtractor={(item) => item.key}
          renderItem={(item) => this._renderItem(item)}
          extraData={this.state}  // IMPORTANT!
        />
      </View>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FoodList />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 22,
  },
  textItem: {
    fontSize: 24,
  },
  activeItem: {
    fontSize: 24,
    backgroundColor: 'red',
  },
});