Reactjs 更改状态时，将仅渲染使用该状态的组件，还是渲染同一级别的所有组件？

就像我的问题react native或react一样，只有组件的状态发生更改时，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>
    </>
  );
};

const数据=[
{
id:'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'，
标题：“第一项”，
},
{
id:'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'，
标题：“第二项”，
},
{
id:'58694a0f-3da1-471f-bd96-145571e29d72'，
标题:"第三项",，
},
];
常量项=（{title}）=>(
{title}
);
常量应用程序：（）=>React$Node=（）=>{
const[number，setNumber]=使用状态（1）；
常量renderItem=（{item}）=>{
返回；
};
返回(
{
设置编号（编号+1）
}}
title={number.toString（）}
color=“#841584”
accessibilityLabel=“了解有关此紫色按钮的详细信息”
/>
项目id}
/>
);
};

---

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

如果组件的状态发生更改，所有组件都将重新渲染。

是的，我相信，但我的朋友告诉我它不会渲染，因为它将使用阴影比较，并且只渲染状态已更改的组件。那么你能解释清楚吗？只有当组件的状态发生变化时，才能触发重新渲染。状态可以从道具更改或直接设置状态更改更改。组件获取更新的状态，并决定是否应重新呈现组件。不幸的是，默认情况下React非常简单，基本上总是重新渲染所有内容。因此，当设置状态时，组件re render=>all child将重新渲染？只有当道具或状态传递给子组件时，子组件才会重新渲染