为什么组件在每次状态更新时都会重新挂载？答案

【问题标题】：Why does component remount every state update?为什么组件在每次状态更新时都会重新挂载？
【发布时间】：2021-05-11 00:02:52
【问题描述】：

编辑：

在提出这个问题之前，我在代码中犯了一些愚蠢的错误。我现在意识到，这个问题可能不会像我所说的实际上本身具有误导性那样对任何人有用。向那些回复的人道歉并感谢您。

我目前正在学习 React Native，并且遇到了一些不直观的行为。据我所知，可以使用 useEffect 挂钩来确定组件的生命周期（即何时安装和卸载）。当我更新组件中的状态（在本例中为“ComponentX”）时，整个组件似乎重新安装。我不认为这是预期的行为。如果有人能告诉我是不是这样 - 或者我做错了什么导致这种情况发生 - 那将非常有帮助！谢谢。

预期行为：组件不会卸载和重新安装。

实际行为：每次状态更改时组件都会重新挂载。

import React, { useEffect, useState } from "react";
import { Text, TouchableHighlight, View } from "react-native";

export default function App() {
  return (
    <ComponentX />
  );
}

const ComponentX = () => {
  const [componentState, setComponentState] = useState(0);

  useEffect(() => {
    console.log("mounted");
    return () => console.log("unmounted");
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <TouchableHighlight
        style={{ backgroundColor: "red", padding: 20 }}
        onPress={() => {
          setComponentState(componentState + 1);
        }}
      >
        <Text>Update State</Text>
      </TouchableHighlight>
      <Text>{componentState}</Text>
    </View>
  );
};

【问题讨论】：

如果您还在useEffect 中记录componentState 的值（不更新依赖数组），它会显示什么？
这似乎是一个不足以产生任何组件重新安装的代码示例。你是说ComponentX 正在卸载和重新安装？什么是在App 中重新安装它？仔细检查您的代码，看看您是否在 componentState 上添加了 useEffect 依赖项，这会导致每次更新 componentState 时都会调用您的效果回调，因为这会导致出现多个 "mounted" 日志。跨度>

标签： javascript reactjs react-native use-state

【解决方案1】：

任何时候如果您更改/更新状态，相关组件将被重新渲染和挂载。这是预期的行为

【讨论】：

【解决方案2】：

这是一种预期的行为。

虽然 React 组件可以有初始状态，但真正的力量在于更新它的状态——毕竟，如果我们不需要更新状态，组件就不应该有任何状态。状态仅保留给在我们的组件中发生变化并在 UI 中可见的数据。

我们不是直接使用this.state修改状态，而是使用this.setState()。这是所有使用状态的 React 组件都可以使用的功能，并允许我们让 React 知道组件状态已更改。这样组件就知道它应该重新渲染，因为它的状态已经改变，而且它的 UI 很可能也会改变。

如果你不希望组件重新渲染，请尝试 React.memo()

希望这会有所帮助：https://linguinecode.com/post/prevent-re-renders-react-functional-components-react-memo

或者试试

PureComponent 代替 Component

或

使用 shouldComponentUpdate - shouldComponentUpdate 方法允许我们退出复杂的反应更新生命周期，以避免在每次重新渲染时一次又一次地调用它。 ... 返回值：默认情况下返回 true，如果返回 false，则不会调用 render()、componentWillUpdate() 和 componentDidUpdate() 方法。

【讨论】：