Javascript react native ordering console.log中的呈现和构造函数

我在理解react本机应用程序中的程序流程时有点困难

我把console.log语句放在应用程序中，试图理解

因此，我将构造函数中的状态初始化为lat:0、long:0、err:null和markers:[]。然后在构造函数中调用API方法来获取所有位置并填充markers方法。打印输出如下所示：

//从渲染方法

[]
[]
[]

通常，React中的异步调用放在

componentDidMount（）

生命周期方法中，该方法在对

render（）

的初始调用后立即被调用。

构造函数

用于初始化，即初始化组件

状态

，在传入的任何

道具上调用
超级
，
绑定组件方法。我会将所有异步调用（包括对
navigator
和
fetchAPI
的调用）移动到
componentDidMount
中，并确保初始化的
状态不会导致
渲染上的任何错误。正如泰勒·麦金尼斯在书中所写：

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

这有几个原因

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

您不能保证AJAX请求在组件装载之前不会得到解决。如果它这样做了，那就意味着您将试图在一个未安装的组件上设置state，这不仅不起作用，而且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;

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
}从“反应本机”；
从“react native maps”导入MapView；
const styles=StyleSheet.create({
容器：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
justifyContent:“柔性端”，
对齐项目：“居中”，
},
地图：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
},
});
const指令=Platform.select({
ios:'按Cmd+R重新加载，\n'+
“用于开发菜单的Cmd+D或shake”，
android:“双击键盘上的R以重新加载，\n”+
'为开发菜单摇动或按下菜单按钮'，
});
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
纬度：0，
经度:0,，
错误：null，
标记：[]
};
}
componentDidMount（）{
navigator.geolocation.getCurrentPosition(
（职位）=>{
获取（API_URL）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
var相关位置=[]
对于（变量i=0；i{
控制台错误（error）；
});
},
（error）=>this.setState（{…this.state，error:error.message}），
{enableHighAccurance:true，超时：20000，最大值：1000}，
);
}
onRegionChange=（地区）=>{
this.setState（{region}）；
}
onPress=（）=>{
}
render（）{
console.log（this.state.markers）；
返回(
{this.state.markers.map（marker=>{
返回
})}
);
}
}
导出默认应用程序；
通常，React中的异步调用放在
componentDidMount（）
生命周期方法中，该方法在对
render（）
的初始调用后立即被调用。
构造函数
用于初始化，即初始化组件
状态
，在传入的任何
道具上调用
超级
，
绑定组件方法。我会将所有异步调用（包括对
navigator
和
fetchAPI
的调用）移动到
componentDidMount
中，并确保初始化的
状态不会导致
渲染上的任何错误。正如泰勒·麦金尼斯在书中所写：

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

这有几个原因

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

你不能保证AJAX会重新启动