React Native - 如何防止重新渲染“静态”组件答案

【问题标题】：React Native - How to prevent re-render an "static" componentReact Native - 如何防止重新渲染“静态”组件
【发布时间】：2021-08-14 21:34:19
【问题描述】：

我在这里遇到了一个小问题，尝试使用 UseEffect React Hook 更新组件，它也结束了渲染整个父组件。

我将我的代码简化为这个示例，但仍然找不到解决方案。我不明白为什么每次更改“previewVisible”状态时，它都会呈现“Greeting”组件。已经尝试过 UseCallback、memo、UseMemo ...我不知道我在这里缺少什么。

  const [previewVisible, setPreviewVisible] = useState(false);
  const Greeting = React.memo(function Greeting({ name }) {
    console.log(Math.random(), "render");
    return <Text>{name}</Text>;
  });

  return (
    <View>
      <Greeting name={"bla bla bla"} />
      <TouchableOpacity onPress={() => setPreviewVisible(!previewVisible)}>
        <Text>Press me</Text>
      </TouchableOpacity>
      {previewVisible && <ModalPreview />}
    </View>
  );
};

在本例中，我想显示或隐藏“ModalPreview”，但不渲染 Greeting 组件本身。

【问题讨论】：

把 Greeting 组件移到函数外就可以了，不要放在函数内

标签： reactjs react-native react-hooks

【解决方案1】：

将问候组件实现移出父组件。

const App = () => {
const [previewVisible, setPreviewVisible] = useState(false);
  return (
    <View>
      <Greeting name={"bla bla bla"} />
      <TouchableOpacity onPress={() => setPreviewVisible(!previewVisible)}>
        <Text>Press me</Text>
      </TouchableOpacity>
      {previewVisible && <ModalPreview />}
    </View>
  );
};

现在你甚至不需要使用备忘录，除非你想用不同的道具多次使用它。

  const Greeting = ({ name }) => {
    console.log(Math.random(), "render");
    return <Text>{name}</Text>;
  };

【讨论】：

在示例和真实案例中都表现出色。我对在父组件中声明的子组件感到非常困惑。非常感谢。

【解决方案2】：

将带有备忘录的 Greeting 函数移到父函数之外

小吃：https://snack.expo.dev/@ashwith00/4903ce


const Greeting = React.memo(function Greeting({ name }) {
  console.log(Math.random(), 'render');
  return <Text>{name}</Text>;
});

export default function App() {
  const [previewVisible, setPreviewVisible] = React.useState(false);

  return (
    <View>
      <Greeting name={'bla bla bla'} />
      <TouchableOpacity onPress={() => setPreviewVisible(!previewVisible)}>
        <Text>Press me</Text>
      </TouchableOpacity>
      {previewVisible && <View />}
    </View>
  );
}

【讨论】：