React Native无需刷新应用实时监听AsyncStorage变化实现页面条件渲染

问题根因 #

1. 原有基于AsyncStorage key总数触发状态更新的逻辑存在断层：登录成功写入存储后没有主动更新itemsLength，导致读取存储的useEffect不会触发，isAuthenticated无法同步更新
2. 全量订阅Redux store的逻辑会捕获所有状态变更（包括和认证无关的帖子状态更新），存在不必要的性能损耗

最优性能方案实现步骤 #

1. 移除冗余逻辑 #

删掉App.js中以下没用的代码：

• itemsLength相关的state、keys()方法
• 监听itemsLength的useEffect
• 全量订阅store的subscribe逻辑

2. 改造App.js导航逻辑 #

Redux官方提供的useSelectorAPI只会在你订阅的字段发生变化时才触发组件更新，性能远高于全量订阅，标准实现如下（默认你已经在项目入口index.js中用Provider包裹了整个App，这是Redux的标准写法）：

import { useSelector } from 'react-redux'
import { ActivityIndicator } from 'react-native'

export default function App() {
  // 仅订阅认证状态字段，只有登录/登出操作才会触发更新，其他Redux状态变化不会影响
  const isAuthenticated = useSelector(state => state.rootReducer.authenticated)
  const [isLoading, setIsLoading] = useState(true)

  // 初始化仅执行一次，读取本地存储补全Redux认证状态
  useEffect(() => {
    const initAuthState = async () => {
      try {
        const userObj = await AsyncStorage.getItem('currentStoredUserState')
        if(userObj != null){
          const jsonObject = JSON.parse(userObj)
          // 本地有有效登录状态则同步到Redux
          if(jsonObject.state) {
            store.dispatch({
              type: SIGN_IN,
              payload: {
                authenticated: true,
                currentUser: jsonObject.currentStoredUser_
              }
            })
          }
        }
      } catch(err) {
        console.log(err)
      } finally {
        setIsLoading(false)
      }
    }
    initAuthState()
  }, [])

  // 初始化加载占位，避免闪登录页
  if(isLoading) {
    return <ActivityIndicator size="large" style={{flex:1,justifyContent:'center'}} />
  }

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown:false
        }}
      >
        {!isAuthenticated ? (
          <Stack.Screen name="Sign" component={Sign} />
        ) : (
          <Stack.Screen name="UserUI" component={Tabs} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

3. 保留现有改造后的action逻辑 #

你已经修改的setAuthStorage返回Promise、存储完成后再dispatch更新Redux的逻辑不需要改动，登录成功后Redux的authenticated字段变更会被useSelector自动捕获，直接切换导航到用户页，不需要额外监听。

性能优势说明 #

• 仅订阅认证相关字段，和认证无关的帖子等状态更新不会触发组件重渲染，性能提升非常明显
• 移除了冗余的AsyncStorage轮询/监听逻辑，减少了不必要的本地IO操作
• 初始化仅执行一次本地存储读取，无多余重复执行逻辑

内容的提问来源于stack exchange，提问作者othmane-be