尽管使用备忘录并且没有更改任何道具，但对功能组件中的子项做出反应

Question

我有一个图标组件，它绘制一个图标并且它正在闪烁，因为父级正在让它重新渲染。我不明白为什么会发生这种情况以及如何防止这种情况发生。

Here is a snack 显示问题。

我们使用 setInterval 模拟父级更改。

我们通过在控制台中记录“重新渲染”来模拟图标重新渲染。

代码如下：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';


// or any pure javascript modules available in npm
let interval = null

const Child = ({name}) => {
  //Why would this child still rerender, and how to prevent it?
  console.log('rerender')
  return <Text>{name}</Text>
}
const ChildContainer = ({name}) => {
  const Memo = React.memo(Child, () => true)
  return <Memo name={name}/>
}

export default function App() {
  const [state, setState] = React.useState(0)
  const name = 'constant'
  // Change the state every second
  React.useEffect(() => {
    interval = setInterval(() => setState(s => s+1), 1000)
    return () => clearInterval(interval)
  }, [])
  return (
    <View>
      <ChildContainer name={name} />
    </View>
  );
}

如果你能解释一下为什么会发生这种情况以及解决它的正确方法是什么，那就太棒了！

Answer 1

如果您将const Memo = React.memo(Child, () => true) 移到ChildContainer 之外，您的代码将按预期工作。

虽然ChildContainer 不是记忆组件，但它会被重新渲染，并在每次父重新渲染时创建一个记忆化的Child 组件。

通过将 memoization 移到 ChildContainer 之外，您可以安全地记住您的组件 Child 一次，并且无论 ChildContainer 被调用多少次，Child 只会运行一次。

这是一个有效的demo。我还在App 上添加了一个日志来跟踪每次重新渲染，并在ChildComponent 上添加了一个日志，因此您可以看到在每次重新渲染时都会调用此函数，而无需再实际接触Child。

您也可以直接用React.memo 包裹Child：

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";

// or any pure javascript modules available in npm
let interval = null;

const Child = React.memo(({ name }) => {
  //Why would this child still rerender, and how to prevent it?
  console.log("memoized component rerender");
  return <Text>{name}</Text>;
}, () => true);

const ChildContainer = ({ name }) => {
  console.log("ChildContainer component rerender");
  return <Child name={name} />;
};

export default function App() {
  const [state, setState] = React.useState(0);
  const name = "constant";
  // Change the state every second
  React.useEffect(() => {
    interval = setInterval(() => setState(s => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  console.log("App rerender");
  return (
    <View>
      <ChildContainer name={name} />
    </View>
  );
}