组件在 console.log 中渲染 4 次

Question

首先，感谢您阅读我的文章。我正在使用 Expo 进行本机反应。我使用 componentWillMount 和 componentDidMount 在我的应用程序中设置函数。它工作正常，但是我很难理解为什么我的组件渲染了 4 次...

我得到这个结果（用我的 console.log）：

Results retrieveDeviceManufacturer() : 42 ===>retrieveProfileUserId 42 Results retrieveDeviceUID() : ... Results retrieveDeviceOSVersion() : 10 Results retrieveDeviceManufacturer() : Google Connection type wifi Is connected? true

但是我每次执行该组件时连续4次。我当然是 react-native 的新手，需要帮助才能完全理解这一点。

如果您能提供帮助，非常感谢。这是我的整页代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isFirstConnection: true };
    status: "0";
    deviceOSVersion: null;
    deviceManufacturer: null;
    deviceUID: null;
    profileUserId: null;
  }

  performTimeConsumingTask = async () => {
    return new Promise(resolve =>
      setTimeout(() => {
        resolve("result");
      }, 1000)
    );
  };
  componentWillMount = async () => {
    this.setState({ deviceOSVersion: await retrieveDeviceOSVersion() });
    this.setState({ deviceManufacturer: await retrieveDeviceManufacturer() });
    this.setState({ deviceUID: await retrieveDeviceUID() });
    this.setState({ profileUserId: await retrieveProfileUserId() });
  };

  async componentDidMount() {
    this.setState({ status: "6" });
    // Preload data from an external API
    // Preload data using AsyncStorage
    const data = await this.performTimeConsumingTask();

    if (data !== null) {
      this.setState({ isFirstConnection: false });
    }

    Font.loadAsync({
      Roboto: require("./assets/fonts/Roboto-Black.ttf")
    });
  }

  render() {
    if (this.state.status == "6") {
      console.log(
        "Results retrieveDeviceManufacturer() : ",
        this.state.profileUserId
      );
      if (this.state.profileUserId !== null && this.state.profileUserId > 0) {
        // OK
      } else {
        // Need connection
      }
      console.log("===>retrieveProfileUserId", this.state.profileUserId);

      // Device UUID
      console.log("Results retrieveDeviceUID() : ", this.state.deviceUID);
      if (this.state.deviceUID !== null) {
        // OK
      } else {
        // TODO : next step...
        storeDeviceUID(getDeviceUID());
      }

      // Detect Manufacturer : iOS, Android, ..
      if (this.state.deviceManufacturer !== null) {
        // OK
      } else {
        storeDeviceManufacturer(getDeviceManufacturer());
      }

      // Get system version
      if (this.state.deviceOSVersion !== null) {
        // OK
      } else {
        storeDeviceOSVersion(getDeviceOSVersion());
      }

      console.log(
        "Results retrieveDeviceOSVersion() : ",
        this.state.deviceOSVersion
      );
      console.log(
        "Results retrieveDeviceManufacturer() : ",
        this.state.deviceManufacturer
      );

      NetInfo.fetch().then(state => {
        console.log("Connection type", state.type);
        console.log("Is connected?", state.isConnected);
      });
      if (this.state.isFirstConnection) {
        return <SplashScreen />;
      }
      return <Navigation />;
    } else {
      console.log("STATUS INITIALISATION");
      this.setState({ status: "1" });
      return null;
    }
  }
}

Answer 1

从您的代码中我可以看出，在 componentWillMount 中您调用了 setState 4 次。一般来说，只要使用 setState 改变状态，React 就会重新渲染组件。你调用它 4 次——你得到 4 次重新渲染（这是一种可能性）。

For additional info please refer here

我不会担心，直到您开始注意到应用程序的性能问题，在这种情况下我会考虑优化。但不是事先。

此外，componentWillMount 已被弃用，您不应在您的组件中使用它。 Please refer here.

希望对您有所帮助！

Answer 2

看看你的 console.log 在 render fnuction 中打印 4 次的原因是因为你在 componentWillMount 中添加了 4 个 setState 函数，

componentWillMount = async () => {
    this.setState({ deviceOSVersion: await retrieveDeviceOSVersion() });
    this.setState({ deviceManufacturer: await retrieveDeviceManufacturer() });
    this.setState({ deviceUID: await retrieveDeviceUID() });
    this.setState({ profileUserId: await retrieveProfileUserId() });
  };

所以 setState 的每个实例都会再次重新渲染应用程序，即再次调用渲染函数，所以这是一个不好的做法，因此渲染函数被调用了 4 次。尝试将所有内容写入 SetState，

componentWillMount = async () => {
        this.setState({ deviceOSVersion: await retrieveDeviceOSVersion(),deviceManufacturer: await retrieveDeviceManufacturer() ,
deviceUID: await retrieveDeviceUID(),profileUserId: await retrieveProfileUserId()});

      };

并尝试使用 comopnentDidmount 代替 componentWillMount，因为它将被弃用。希望对你有帮助

Answer 3

React 是否会在每次调用 setState 时重新渲染所有组件和子组件？

默认回答是。

组件在 console.log 中渲染 4 次

Component renders 4 times in console.log

react-native

expo

react-lifecycle