Блог

Главная - Вопросы по программированию - При изменении состояния будут отображаться только компоненты, использующие это состояние, или будут отображаться все компоненты одного уровня?

При изменении состояния будут отображаться только компоненты, использующие это состояние, или будут отображаться все компоненты одного уровня?

#reactjs #react-native

#reactjs #react-native

Вопрос:

Как и в моем вопросе, react native или react автоматически вычисляют рендеринг, когда изменяется только состояние компонента. Как пример

 const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];
const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);



const App: () => React$Node = () => {
  const [number, setNumber] = useState(1);
  const renderItem = ({item}) => {
    return <Item title={item.title} />;
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Button
            onPress={() => {
              setNumber(number 1)
            }}
            title={number.toString()}
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
          <FlatList
            data={DATA}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
          />
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

При установке номера состояния повторяется только номер кнопки или все компоненты включают кнопку в повторный просмотр flatlist

Ответ №1:

Все компоненты будут повторно отображены снова, если произойдет изменение состояния компонента.

Комментарии:

1. Да, я верю в это, но мой друг сказал мне, что он не будет отображаться, потому что он будет использовать shadown compare и отображать только компонент с измененным состоянием. Итак, вы можете четко объяснить?

2. Повторный рендеринг может быть запущен только в том случае, если состояние компонента изменилось. Состояние может измениться в результате изменения реквизита или прямого изменения setState. Компонент получает обновленное состояние, и React решает, следует ли повторно отображать компонент. К сожалению, по умолчанию React невероятно упрощен и в основном постоянно перерисовывает все.

3. Итак, при заданном состоянии компонент re-render => все дочерние элементы будут повторно отображаться?

4. Дочерний элемент будет повторно отображаться только тогда, когда реквизиты или состояния передаются дочернему компоненту