Question

我还有更多的概念性问题

据我了解，每次更改父组件中的状态时，所有子组件都将重新呈现。为了使上下文正常工作，它必须位于根父组件中，并通过提供程序将状态传递给所有子组件。

那么当您更新全局上下文状态时，有什么办法可以重新呈现所有子组件？

我已经看到人们实现了多个上下文对象，但是为什么这很重要，因为状态仍在更改为根父级，因此所有子级组件仍会正确呈现？上下文提供者只是包装器，而不是状态实际被更新的地方。

或没有一个根父级组件，而是仅将所需的全局状态传递给某些子级组件的中间人父级组件。但是，您将如何实际地组织它以及如何与路由一起使用？

请让我知道我是否错误或遗漏了一些东西。

我的上下文看起来像这样，我需要一种更好的组织方式

  <Context.Provider
          value={{
            //Reducer1
            stateProp1: stateReducer1.stateprop1,
            stateProp2: stateReducer1.stateprop2,
            dispatchContextTrue: () => handleDispatchTrue(),
            dispatchContextFalse: () => handleDispatchFalse(),

            //Auth Reducer
            authState: stateAuthReducer.is_authenticated,
            profileState:  stateAuthReducer.profile,
            dbProfileState: stateAuthReducer.db_profile,
            handleUserLogin: () => handleLogin(),
            handleUserLogout: () => handleLogout(),
            handleUserAddProfile: (profile) => handleAddProfile(profile),
            handleUserRemoveProfile: () => handleRemoveProfile(),
            handleAddDBProfile: (profile) => handleDBProfile(profile),
            handleRemoveDBProfile: () => handleRemoveDBProfile(),

            //Form Reducer
            useContextChangeState: stateFormReducer.user_textChange,
            useContextSubmitState: stateFormReducer.user_textSubmit,
            useContextSubmit: (event) => handleFormSubmit(event),
            useContextChange: (event) => handleFormChange(event),

            //Posts Reducer
            postsState: statePostsReducer.posts,
            commentsState:  statePostsReducer.comments,
            userPostsState: statePostsReducer.user_posts,
            searchPostsState: statePostsReducer.db_search_posts,
            handleAddPosts: (posts) => handleSetPosts(posts),
            handleRemovePosts: () => handleRemovePosts(),
            handleAddComments: (comments) => handleSetComments(comments),
            handleRemoveComments: () => handleRemoveComments(),
            handleAddUserPosts: (posts) => handleSetUserPosts(posts),
            handleRemoveUserPosts: () => handleRemoveUserPosts(),
            handleSetSearchPosts: (posts) => handleAddSearchPosts(posts),
            handleRemoveSearchPosts: () => handleRemoveSearchPosts(),

            //User Reducer
            otherUserProfileState: stateUserReducer.db_other_user_profile,
            otherUserPostsState: stateUserReducer.db_other_user_posts,
            userMessagesState: stateUserReducer.user_messages,
            handleAddOtherUserProfile: (profile) => handleSetOtherUserProfile(profile),
            handleRemoveOtherUserProfile: () => handleRemoveOtherUserProfile(),
            handleAddOtherUserPosts: (posts) => handleSetOtherUserPosts(posts),
            handleRemoveOtherUserPosts: () => handleRemoveOtherUserPosts(),
            handleAddUserMessages: (messages) => handleSetUserMessages(messages),
            handleRemoveUserMessages: () => handleRemoveUserMessages(),

            //Handle auth
            handleAuth: (props) => handleAuthentication(props),
            authObj: auth
          }}>
          <Routes />
      </Context.Provider>

您将如何根据上下文组织和分离全局状态？

0 个答案: