reactjs – 需要关于ReactNative和Redux以及Navigator的一些概念的帮助

2023年12月16日 214次阅读

在这个场景中进行了几次测试之后,我遇到了一些我无法回答的问题,所以我请求帮助来澄清我的概念.

> Navigator中的Provider vs props

有什么区别以及设置导航器并将存储传递到React Native应用程序的不同场景的最佳方法是什么

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>                        //<-- here
        <Navigator style={{flex: 1}}
        initialRoute={{ component: MainContainer }} //<-- here 

          renderScene={ (route, navigator) => {
            const Component = route.component;
            return (
              <View style={{flex: 1, marginTop:40}}>
                <Component navigator={navigator} route={route} {...route.passProps} />
              </View>
  ...

MainContainer与react-reactx连接函数中的Component连接,将Props和Actions传递给props.

是否更好地访问上下文或道具？

VS

const store = createStoreWithMiddleware(reducer, initialState); //<-- here
export default class App extends Component {
render () {
  return (
    <Navigator style={{flex: 1}}
      initialRoute={{ component: MainComponent }}

      renderScene={ (route, navigator) => {
      const Component = route.component;
      return (
        <View style={{flex: 1, marginTop:40}}>
          <Component 
             navigator={navigator} 
             route={route} 
             {...route.passProps} 
             store={store}                      //<-- here
               />
       </View>
    ...

>在组件Scene中,(不包装为智能容器)如何设置有关redux状态更改的侦听器,或者让我将组件状态绑定到redux状态.

在导航器中按下newScene时,将状态(Redux存储)和操作作为passProps传递,然后在newScene调度操作中正确执行,状态为update,但是……不会重新渲染场景.

我是否必须将状态组件绑定到Redux状态才能看到屏幕上反映的更改？

在这种情况下,是否有关于最佳实践的示例？

> props vs在同一场景中连接

在同一场景中,从顶部到底部组件,这是通过redux状态(不讨论组件状态)的最佳方法,因为将组件包装在“smart”容器中,并使用来自react-redux的“connect”,或者传递漏洞场景作为道具.

最佳答案 >应该使用第一个解决方案,因为提供者应该是最外层的组件(以便下面的所有内容都可以正确连接).

>您可以在componentDidReceiveProps上运行回调,或者(我更喜欢)只需连接需要访问商店的组件.这正是redux的用途.不这样做的唯一原因是,如果您希望将组件重用于其他商店内容(真正具有代表性的组件)

>这在很大程度上取决于应用和组件的深度,但总的来说,这是完全可以的.您也可以将信息作为道具传递,但随着您的应用程序变得越来越大,您可能需要传递大量道具,这可能会混淆您组件的真实意图

点赞