标签: rerender

假设我们有一个父组件和多个功能子组件。我想清楚地知道父级是否重新渲染，子级是否重新渲染。

在阅读了几篇文章后，我了解到我们可以通过 3 种方法来检测重新渲染。（如果还有更多方法，请告诉我。）

1. 将 a 放入console.log子组件中。

2.在设置中使用Chrome油漆闪烁选项。

3.使用React开发工具

所有这些方法都可以正确地了解组件是否真的重新渲染吗？因为它似乎不能与 React.memo 一起正常工作。

console.log当我用 React.memo 包装子组件时，当父组件重新渲染时，它不会打印，这是正确的。但仍然使用 Chrome 和 React 开发工具突出显示子组件，就像它重新渲染一样。

CodeSandbox： https: //codesandbox.io/s/bold-cloud-iv0rv （如果我们添加一辆新车，静态组件仍然以绿色突出显示，但根据备忘录，它不应该重新渲染。）

现在我怀疑，油漆闪烁是否无法正常工作或 React.memo 有问题？

我在 flatlist 的页脚中放置了一个输入字段，但是当我尝试输入任何内容时，它会自动关闭键盘，因为重新渲染了 flatlist 页脚。

我试图从 Scrollview 嵌套 flatlist 但这带来了警告..

如何阻止页脚被重新渲染？我可以在不嵌套 Scrollview 的 flatlist 的情况下解决这个问题吗？

<FlatList
              ListHeaderComponent={() => (
                <View style={styles.discountContainer}>
                  <Text style={[styles.buttonText, { letterSpacing: 3 }]}>
                    10% DISCOUNT ON 8 COURSES
                  </Text>
                </View>
              )}
              numColumns={2}
              data={data}
              renderItem={({ item }) => (
                <View>
                  <SingleProduct item={item} />
                </View>
              )}
              ListFooterComponent={() => (
                <View>
                  <View style={styles.couponContainer}>
                    <Input
                      placeholder='Coupon code'
                      placeholderTextColor='#0a5796'
                      color='#0a5796'
                      inputStyle={{
                        color: '#0a5796',
                      }}
                      inputContainerStyle={{
                        borderBottomWidth: 0,
                        height: 50,
                      }}
                      containerStyle={styles.couponInputContainer}
                      onChangeText={(value) =>
                        this.setState({ couponCode: value })
                      }
                      value={this.state.couponCode}
                    />
                    {couponLoading …

我认为事实是，当父组件在 React 中重新渲染时，通常所有子组件也会重新渲染。

我做了一个实验来证实：

https://codesandbox.io/s/currying-pine-r16rzi

  return (
    <div>
      <div>Time now is {timeNow.toLocaleTimeString()}</div>
      <TheTimeNow /><TheTimeNow />
    </div>
  );

该父组件重新渲染，并且<TheTimeNow />props 值没有变化（它没有），但它仍然重新渲染并显示更新时间。

我认为React实际上改变了DOM是不一样的，因为我认为其机制是React使用以前的虚拟DOM与新的虚拟DOM进行比较，并根据需要仅更新最小的实际DOM节点document.documentElement。

如果您使用 Google Chrome 并在时间语句上执行 Inspect Element，就可以看到这一点：只有时间部分发生变化，其他英文单词保持不变。与此相比，如果是纯 JavaScript，则所有节点都会发生变化： https: //jsfiddle.net/8sj2ugae/1/，当您执行 Inspect Element 时。

然而，我们不能说，如果一个孩子是<Foo />并且由于没有传递给它的道具，那么<Foo />真的不应该改变，并且调用是浪费的Foo()？（如果Foo是函数组件，或者render()如果是类组件则调用该方法。）

现在，由于所有子项都会重新渲染，这意味着它们的所有子项也会重新渲染。递归地重复这个规则，这意味着整个子树被重新渲染。

我的问题是：如果他们的道具没有改变，他们是否真的不需要重新渲染，或者是否有其他因素使他们真的需要重新渲染？

我在我的应用程序中使用React Navigation。返回时如何刷新上一个面板上的数据？

一个实际的例子是：我目前在面板A中，导航到面板B，在其中更新面板A中显示的数据库中的数据。在更改数据库中的数据之后，我对面板A进行goBack（）之后，希望面板A现在已重新呈现并保存数据库中的新数据。