我需要使用 Redux 还是 Context API答案

【问题标题】：Do I need to use Redux or Context API我需要使用 Redux 还是 Context API
【发布时间】：2019-09-09 11:47:12
【问题描述】：

我有一个用户像往常一样首先登录的应用程序。我的应用有几个屏幕，由react-native-navigation 导航。

在登录以外的每个屏幕上，我都需要知道哪个用户正在使用我的应用程序，因为内容是由他/她的uniqueID 专门提供的。当用户成功登录时，我得到了uniqueID，但我不知道如何将这个uniqueID 传递到其他屏幕。

我是否需要使用Redux 或context API 来处理此问题，或者是否有其他方法可以在不更改项目的情况下在屏幕之间来回传递这些数据？

这是我的 App.js：

import React, { Component, PropTypes } from 'react';
import { AppNavigator } from './components/Navigator';


 class App extends React.Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}
export default App;

这是我的导航器组件：

const Stack = createStackNavigator({

    Main: { screen: MainScreen },
    Login: {screen: LoginScreen},
    Profile: {screen: ProfileScreen},
    NewSurvey: {screen: NewSurveyScreen},
},
    {
        initialRouteName: 'Login',
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
            gesturesEnabled: false,
        }
    })

export const AppNavigator = createAppContainer(Stack);

【问题讨论】：

使用redux对你更好
@ma_dev_15 这是有争议的，这就是这个问题的问题。另外，这已经been asked了。
你也可以使用本地存储
好吧，为了让你更清楚，如果你使用 redux 的连接，你可以在 props 中获取用户详细信息，而使用 context 时，你最终会在每个组件中写入 Consumer。所以，你可以决定哪个会更好看？当Provider 的值发生变化时，所有Consumer 都会重新渲染，这对性能有很大影响reactjs.org/docs/context.html#caveats
我认为您的问题并不清楚，如果您的问题只是通过屏幕传递数据，请阅读我的答案，但如果您的意思是使用哪一个（redux - contextAPI），那将是……跨度>

标签： javascript reactjs react-native redux jsx

【解决方案1】：

redux 或 react-context

“Redux 是 JavaScript 应用程序的可预测状态容器。”

“上下文提供了一种通过组件树传递数据的方法无需在每个级别手动传递道具。”

对于区域设置、主题更改、用户身份验证等低频更新，React 上下文非常好。但是对于具有高频更新的更复杂的状态，React Context 将不是一个好的解决方案。因为，React Context 会在每次更新时触发重新渲染，手动优化它可能非常困难。在那里，像 Redux 这样的解决方案更容易实现。

何时使用上下文 API

如果您使用 Redux 只是为了避免将 props 向下传递到嵌套较深的组件，那么您可以将 Redux 替换为 Context API

何时使用 Redux

Redux 是一个可预测的状态容器，它在组件之外处理应用程序的逻辑，集中应用程序的状态，使用 Redux DevTools 跟踪应用程序状态何时、何地、为什么以及如何改变，或者使用 Redux Form 等插件， Redux Saga、Redux Undo、Redux Persist、Redux Logger 等。

在这种情况下，我们可以使用 Redux。

【讨论】：

【解决方案2】：

要将数据传递到其他屏幕，您可以使用 React Navigation 导航方法并在其中传递一些数据。

我不知道您是如何存储数据的，无论是使用Realm 或SQLite 等数据库...但是每当您从那里获取数据并且想要将其传递到其他屏幕时执行此操作如下：

this.props.navigation.navigate('SecondPage', {
        //your data goes here
        });

例如：

this.props.navigation.navigate('Homescreen', {
       username: this.state.username,
       });

然后你可以得到如下数据：

const username = navigation.getParam('username', 'Default'); //default is a value that will be used if there was no username passed

【讨论】：

这正是我所需要的。因为如果登录成功，我导航到MainScreen，在这里我需要呈现一些对用户完全独特的内容。为了正确呈现内容，我需要您提到的方法。非常感谢。

【解决方案3】：

我认为您正在按照共享的代码使用React Navigation。我建议您按照here 的建议实施身份验证流程，并使用 Redux 设置/访问 uniqueID。 Redux 提供更多的东西，并被广泛用于状态管理。
您可以在 _signInAsync() 中设置 uniqueID，然后通过它访问它。 LocalStorage 可能是一种选择，但不是可行的解决方案，因为从 LocalStorage 访问值可能会影响应用性能。

【讨论】：

非常感谢，除了上面提到的方法，我也试试你的方法。