React/React Native状态变更时组件重渲染范围咨询

先拆解你的核心疑问 #

1. 状态变更时哪些组件会重渲染？

默认情况下，当组件的状态（state）或传入的属性（props）发生变化时，该组件会触发重渲染，并且它的所有子组件也会跟着重渲染——不管子组件是否用到了变化的状态/属性。

并不是只有“直接使用该状态的组件”才会重渲染，而是从状态变更的组件开始，整个下属的子组件树都会默认触发重渲染流程。

2. 是不是只有组件自身状态变更才会触发重渲染？

当然不是。除了自身state变更，还有两种常见场景也会触发组件重渲染：

• 父组件重渲染了，即使传给该组件的props没有变化，它也会跟着重渲染
• 组件依赖的上下文（Context）发生变化时，也会触发重渲染

结合你的示例代码具体分析 #

看你提供的代码，App组件维护了number这个状态，当点击按钮调用setNumber更新状态时：

1. 首先App组件会因为自身state变更触发重渲染
2. 接着App的所有子组件——包括<Button>、<FlatList>，以及<FlatList>渲染出来的每一个<Item>组件，都会跟着重渲染
3. 哪怕<Item>组件完全没用到number这个状态，仅仅因为它的父组件（App）重渲染了，默认情况下它也会被重新调用渲染

优化不必要重渲染的小技巧（可选） #

如果你想避免这类无意义的重渲染（比如示例里的<Item>），可以用React.memo包裹子组件，让它只有在props实际变化时才重渲染：

const Item = React.memo(({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
));

修改后，当App因为number变更重渲染时，<Item>的props（title）没有变化，就不会跟着触发重渲染了。

内容的提问来源于stack exchange，提问作者Anhdevit