React Native如何正确展示从AsyncStorage获取的存储数据

• 普通变量修改无法触发React重渲染：你定义的user_name是普通全局变量，React无法感知这类变量的变更，就算异步赋值成功也不会触发页面刷新。
• 异步函数不阻塞主线程执行：getName是异步方法，调用后不会等待返回结果就会继续执行后续的打印、渲染逻辑，所以会先输出初始值-、先渲染初始页面，等异步请求拿到结果后才会更新变量，此时首次渲染已经完成。
• 异步逻辑放在组件根体会重复执行：每次组件重渲染都会重新调用一次getName，造成不必要的性能开销。

使用React自带的useState存储用户名（状态变更会自动触发重渲染），搭配useEffect控制异步请求只在组件首次挂载时执行一次，拿到结果后更新状态即可实现页面自动刷新。

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Text } from 'react-native';

const getName = async () => {  
  const jsonValue = await AsyncStorage.getItem('name_key')
  return jsonValue != null ? JSON.parse(jsonValue) : null;  
}

const Welcome = () => {
  // 定义响应式状态，初始值为'-'
  const [userName, setUserName] = useState('-');

  useEffect(() => {
    const fetchUserName = async () => {
      const keyValue = await getName();
      // 增加非空判断避免取值异常报错
      if (keyValue?.name) {
        setUserName(keyValue.name);
      }
    };
    fetchUserName();
  }, []); // 空依赖数组表示仅在组件首次挂载完成后执行一次

  return(<Text> Welcome {userName} </Text>)
};

export default Welcome;

内容的提问来源于stack exchange，提问作者Chan