时间戳

首页 > 解决方案 > 更改状态时，是只渲染使用该状态的组件还是所有同级别的组件都渲染？

reactjs - 更改状态时，是只渲染使用该状态的组件还是所有同级别的组件都渲染？

问题描述

就像我的问题一样，只有组件状态发生变化时才反应原生或反应是自动计算渲染。像例子

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>
    </>
  );
};

当设置状态编号时，仅按钮编号重新渲染或所有组件在平面列表重新渲染中包含按钮

标签： reactjsreact-native

解决方案

如果组件状态发生变化，所有组件将重新渲染。

推荐阅读