react-native ordering console.log 中的渲染和构造函数

通常，React 中的异步调用放置在componentDidMount()生命周期方法中，在初始调用render(). 该constructor是初始化，即初始化组件state，调用super任何props传入，bind荷兰国际集团组件的方法。我将所有的异步调用，包括调用navigator和fetchAPI成componentDidMount，并确保无论state您初始化不会造成任何错误的render。正如 Tyler McGinnis 在这篇文章中所写：

AJAX 请求应该进入 componentDidMount 生命周期事件。

这有几个原因，

Fiber 是 React 协调算法的下一个实现，将能够根据需要启动和停止渲染以提高性能。这样做的一个权衡是 componentWillMount，另一个生命周期事件，在其中发出 AJAX 请求可能是有意义的，将是“非确定性的”。这意味着 React 可能会在需要时在不同时间开始调用 componentWillMount。对于 AJAX 请求来说，这显然是一个糟糕的公式。

您不能保证在组件安装之前 AJAX 请求不会解决。如果是这样，那将意味着您将尝试在未挂载的组件上设置状态，这不仅不起作用，而且 React 会为此大喊大叫。在 componentDidMount 中执行 AJAX 将保证有一个要更新的组件。

这是在所有异步请求解决后正确使用componentDidMount和设置的完整重做示例state。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      latitude: 0,
      longitude: 0,
      error: null,
      markers: []
    };
  }

  componentDidMount() {
  
     navigator.geolocation.getCurrentPosition(
      (position) => {
        
        fetch(API_URL)
           .then((response) => response.json())
           .then((responseJson) => {
              var relevantLocations = []
              for (var i = 0; i < responseJson.length; i++) {
                var location = responseJson[i];
                relevantLocations.push({
                  title: location.name,
                  coordinate: {latitude: location.latitude, longitude: 
                    location.longitude},
                  description: "test" + i
                });
              }
             console.log("Setting state");
             this.setState({
                ...this.state
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                markers: relevantLocations
             });
           })
           .catch((error) => {
             console.error(error);
           });

       },
      (error) => this.setState({ ...this.state, error: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
      );

    
  }

  onRegionChange = (region) => {
    this.setState({ region });
  }

  onPress = () => {
  }

  render() {
    console.log(this.state.markers);
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          onRegionChange={this.onRegionChange}
          onPress={this.onPress}
        >
        {this.state.markers.map(marker => {
            return <MapView.Marker
              key={marker}
              coordinate={marker.coordinate}
              title={marker.title}
              description={marker.description}
            />
          })}
        </MapView>
      </View>
    );
  }
}

export default App;