{"id":64348,"date":"2026-01-23T11:48:31","date_gmt":"2026-01-23T03:48:31","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/64348.html"},"modified":"2026-01-23T11:48:31","modified_gmt":"2026-01-23T03:48:31","slug":"react-native-%e9%b8%bf%e8%92%99%e8%b7%a8%e5%b9%b3%e5%8f%b0%e5%bc%80%e5%8f%91%ef%bc%9ausecontext-%e5%92%8c-usereducer","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/64348.html","title":{"rendered":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer"},"content":{"rendered":"

React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1：useContext \u548c useReducer \u4ee3\u7801\u6307\u5357<\/p>\n

\u4e00\u3001\u6838\u5fc3\u77e5\u8bc6\u70b9：useContext \u548c useReducer \u5b8c\u6574\u6838\u5fc3\u7528\u6cd5<\/h3>\n

1. \u7528\u5230\u7684\u7eaf\u5185\u7f6e\u7ec4\u4ef6\u4e0e API<\/h4>\n

\u6240\u6709\u80fd\u529b\u5747\u4e3a RN \u539f\u751f\u81ea\u5e26，\u5168\u90e8\u4ece react \u6838\u5fc3\u5305\u76f4\u63a5\u5bfc\u5165，\u65e0\u4efb\u4f55\u989d\u5916\u4f9d\u8d56\u3001\u65e0\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93，\u9e3f\u8499\u7aef\u65e0\u4efb\u4f55\u517c\u5bb9\u95ee\u9898，\u4e5f\u662f\u5b9e\u73b0 useContext \u548c useReducer \u7684\u5168\u90e8\u6838\u5fc3\u80fd\u529b，\u96f6\u57fa\u7840\u6613\u7406\u89e3\u3001\u6613\u590d\u7528，\u65e0\u4efb\u4f55\u5197\u4f59，\u6240\u6709 useContext \u548c useReducer \u529f\u80fd\u5747\u57fa\u4e8e\u4ee5\u4e0b\u7ec4\u4ef6\/API \u539f\u751f\u5b9e\u73b0：<\/p>\n\n\u6838\u5fc3\u7ec4\u4ef6\/API\u4f5c\u7528\u8bf4\u660e\u9e3f\u8499\u9002\u914d\u7279\u6027<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n
useContext<\/td>\nReact \u539f\u751f\u94a9\u5b50，\u8bfb\u53d6 Context \u503c，\u5b9e\u73b0\u8de8\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab<\/td>\n\u2705 \u9e3f\u8499\u7aef Context \u8bfb\u53d6\u6b63\u5e38，\u65e0\u517c\u5bb9\u95ee\u9898<\/td>\n<\/tr>\n
useReducer<\/td>\nReact \u539f\u751f\u94a9\u5b50，\u7ba1\u7406\u590d\u6742\u72b6\u6001\u903b\u8f91，\u66ff\u4ee3 useState<\/td>\n\u2705 \u9e3f\u8499\u7aef\u72b6\u6001\u7ba1\u7406\u6b63\u5e38，\u65e0\u517c\u5bb9\u95ee\u9898<\/td>\n<\/tr>\n
createContext<\/td>\nReact \u539f\u751f\u51fd\u6570，\u521b\u5efa Context \u5bf9\u8c61<\/td>\n\u2705 \u9e3f\u8499\u7aef Context \u521b\u5efa\u6b63\u5e38，\u65e0\u517c\u5bb9\u95ee\u9898<\/td>\n<\/tr>\n
Context.Provider<\/td>\nContext \u63d0\u4f9b\u8005\u7ec4\u4ef6，\u63d0\u4f9b Context \u503c<\/td>\n\u2705 \u9e3f\u8499\u7aef Provider \u6b63\u5e38\u5de5\u4f5c<\/td>\n<\/tr>\n
View<\/td>\n\u6838\u5fc3\u5bb9\u5668\u7ec4\u4ef6，\u5b9e\u73b0\u6240\u6709\u300c\u72b6\u6001\u663e\u793a\u5bb9\u5668\u3001\u4ea4\u4e92\u5bb9\u5668\u300d，\u652f\u6301\u5706\u89d2\u3001\u80cc\u666f\u8272\u3001\u9634\u5f71<\/td>\n\u2705 \u9e3f\u8499\u7aef\u6837\u5f0f\u6e32\u67d3\u65e0\u9519\u4f4d，\u5bbd\u9ad8\u3001\u5706\u89d2\u3001\u80cc\u666f\u8272\u5c5e\u6027\u5b8c\u7f8e\u751f\u6548<\/td>\n<\/tr>\n
Text<\/td>\n\u6587\u672c\u7ec4\u4ef6，\u663e\u793a\u72b6\u6001\u4fe1\u606f\u548c\u8ba1\u6570<\/td>\n\u2705 \u9e3f\u8499\u7aef\u6587\u672c\u6e32\u67d3\u6b63\u5e38，\u652f\u6301\u591a\u884c\u6587\u672c<\/td>\n<\/tr>\n
TextInput<\/td>\n\u8f93\u5165\u6846\u7ec4\u4ef6，\u5b9e\u73b0\u7528\u6237\u8f93\u5165\u548c\u72b6\u6001\u66f4\u65b0<\/td>\n\u2705 \u9e3f\u8499\u7aef\u8f93\u5165\u6846\u6b63\u5e38\u5de5\u4f5c，\u652f\u6301\u952e\u76d8\u7c7b\u578b<\/td>\n<\/tr>\n
TouchableOpacity<\/td>\n\u89e6\u6478\u53cd\u9988\u7ec4\u4ef6，\u5b9e\u73b0\u72b6\u6001\u4fee\u6539\u4ea4\u4e92<\/td>\n\u2705 \u9e3f\u8499\u7aef\u89e6\u6478\u54cd\u5e94\u6b63\u5e38，\u4ea4\u4e92\u6d41\u7545<\/td>\n<\/tr>\n
StyleSheet<\/td>\n\u539f\u751f\u6837\u5f0f\u7ba1\u7406，\u7f16\u5199\u9e3f\u8499\u7aef\u6700\u4f18\u7684 useContext \u548c useReducer \u6837\u5f0f：\u72b6\u6001\u663e\u793a\u6837\u5f0f\u3001\u6309\u94ae\u6837\u5f0f，\u65e0\u4efb\u4f55\u4e0d\u517c\u5bb9CSS\u5c5e\u6027<\/td>\n\u2705 \u8d34\u5408\u9e3f\u8499\u5b98\u65b9\u89c6\u89c9\u8bbe\u8ba1\u89c4\u8303，\u989c\u8272\u3001\u5706\u89d2\u3001\u95f4\u8ddd\u5747\u4e3a\u771f\u673a\u5b9e\u6d4b\u6700\u4f18\u503c<\/td>\n<\/tr>\n
SafeAreaView<\/td>\n\u5b89\u5168\u533a\u57df\u5bb9\u5668，\u9002\u914d\u5218\u6d77\u5c4f\u7b49\u5f02\u5f62\u5c4f<\/td>\n\u2705 \u9e3f\u8499\u7aef\u5b89\u5168\u533a\u57df\u9002\u914d\u6b63\u5e38<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e8c\u3001\u6df1\u5165\u7406\u89e3 useContext<\/h3>\n

1. useContext \u662f\u4ec0\u4e48？<\/h4>\n

useContext \u662f React \u63d0\u4f9b\u7684\u4e00\u4e2a Hook，\u7528\u4e8e\u8bfb\u53d6 Context \u7684\u503c\u3002\u5b83\u8ba9\u4f60\u80fd\u591f\u8ba2\u9605 Context \u7684\u53d8\u5316，\u5e76\u5728 Context \u503c\u53d8\u5316\u65f6\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6\u3002<\/p>\n

2. \u4e3a\u4ec0\u4e48\u9700\u8981 useContext？<\/h4>\n

\u5728 React \u4e2d，\u5f53\u7ec4\u4ef6\u5c42\u7ea7\u5f88\u6df1\u65f6，\u901a\u8fc7 props \u9010\u5c42\u4f20\u9012\u6570\u636e\u4f1a\u53d8\u5f97\u975e\u5e38\u7e41\u7410\u548c\u96be\u4ee5\u7ef4\u62a4\u3002useContext \u63d0\u4f9b\u4e86\u4e00\u79cd\u8de8\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab\u7684\u89e3\u51b3\u65b9\u6848，\u5141\u8bb8\u4f60\u5728\u7ec4\u4ef6\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\u8bbf\u95ee\u548c\u66f4\u65b0\u72b6\u6001，\u800c\u65e0\u9700\u901a\u8fc7 props \u9010\u5c42\u4f20\u9012\u3002<\/p>\n

3. useContext \u7684\u57fa\u672c\u8bed\u6cd5<\/h4>\n

const<\/span> value =<\/span> useContext<\/span>(<\/span>MyContext)<\/span>;<\/span><\/p>\n

\u53c2\u6570\u8bf4\u660e：<\/p>\n

    \n
  • MyContext：\u901a\u8fc7 createContext \u521b\u5efa\u7684 Context \u5bf9\u8c61<\/li>\n<\/ul>\n

    \u8fd4\u56de\u503c：<\/p>\n

      \n
    • \u8fd4\u56de\u5f53\u524d Context \u7684\u503c<\/li>\n<\/ul>\n

      4. useContext \u7684\u5de5\u4f5c\u539f\u7406<\/h4>\n

      \u5f53\u4f60\u8c03\u7528 useContext(MyContext) \u65f6，React \u4f1a：<\/p>\n

    • \u67e5\u627e Context Provider：\u4ece\u5f53\u524d\u7ec4\u4ef6\u5f00\u59cb，\u5411\u4e0a\u67e5\u627e\u6700\u8fd1\u7684 MyContext.Provider<\/li>\n
    • \u8ba2\u9605 Context \u53d8\u5316：\u8ba2\u9605 Context \u503c\u7684\u53d8\u5316<\/li>\n
    • \u8fd4\u56de\u5f53\u524d\u503c：\u8fd4\u56de\u5f53\u524d Context \u7684\u503c<\/li>\n
    • \u89e6\u53d1\u91cd\u65b0\u6e32\u67d3：\u5f53 Context \u503c\u53d1\u751f\u53d8\u5316\u65f6，\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6<\/li>\n

      5. useContext \u7684\u7c7b\u578b\u5b9a\u4e49<\/h4>\n

      function<\/span> useContext<\/span><<\/span>T<\/span>><\/span><\/span><\/span>(<\/span>context:<\/span> Context<<\/span>T<\/span>><\/span>)<\/span>:<\/span> T<\/span>;<\/span><\/p>\n

      \u8fd9\u4e2a\u5b9a\u4e49\u544a\u8bc9\u6211\u4eec：<\/p>\n

        \n
      • useContext \u63a5\u53d7\u4e00\u4e2a\u6cdb\u578b\u53c2\u6570 T，\u8868\u793a Context \u503c\u7684\u7c7b\u578b<\/li>\n
      • context：\u901a\u8fc7 createContext<T> \u521b\u5efa\u7684 Context \u5bf9\u8c61<\/li>\n
      • \u8fd4\u56de\u503c：\u7c7b\u578b\u4e3a T \u7684\u503c<\/li>\n<\/ul>\n

        6. useContext \u7684\u4f7f\u7528\u573a\u666f<\/h4>\n

        useContext \u9002\u7528\u4e8e\u4ee5\u4e0b\u573a\u666f：<\/p>\n

          \n
        • \u8de8\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab：\u5728\u7ec4\u4ef6\u6811\u7684\u4efb\u4f55\u4f4d\u7f6e\u8bbf\u95ee\u548c\u66f4\u65b0\u72b6\u6001<\/li>\n
        • \u4e3b\u9898\u5207\u6362：\u5b9e\u73b0\u5168\u5c40\u4e3b\u9898\u5207\u6362（\u5982\u6697\u9ed1\u6a21\u5f0f）<\/li>\n
        • \u7528\u6237\u8ba4\u8bc1：\u5171\u4eab\u7528\u6237\u767b\u5f55\u72b6\u6001<\/li>\n
        • \u56fd\u9645\u5316：\u5171\u4eab\u8bed\u8a00\u548c\u5730\u533a\u8bbe\u7f6e<\/li>\n
        • \u5e94\u7528\u914d\u7f6e：\u5171\u4eab\u5e94\u7528\u914d\u7f6e\u4fe1\u606f<\/li>\n
        • \u5168\u5c40\u72b6\u6001\u7ba1\u7406：\u66ff\u4ee3 Redux \u7b49\u72b6\u6001\u7ba1\u7406\u5e93<\/li>\n<\/ul>\n

          7. useContext \u7684\u6700\u4f73\u5b9e\u8df5<\/h4>\n

          \u2705 \u6700\u4f73\u5b9e\u8df5 1：\u6b63\u786e\u521b\u5efa\u548c\u4f7f\u7528 Context<\/h5>\n

          \/\/ \u521b\u5efa Context<\/span>
          \nconst<\/span> ThemeContext =<\/span> createContext<\/span>(<\/span>{<\/span>
          \n theme<\/span>:<\/span> 'light'<\/span>,<\/span>
          \n toggleTheme<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
          \n}<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u521b\u5efa Provider \u7ec4\u4ef6<\/span>
          \nconst<\/span> ThemeProvider<\/span> =<\/span> (<\/span>{<\/span> children }<\/span>:<\/span> {<\/span> children<\/span>:<\/span> React.<\/span>ReactNode }<\/span><\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> [<\/span>theme,<\/span> setTheme]<\/span> =<\/span> useState<\/span>(<\/span>'light'<\/span>)<\/span>;<\/span><\/p>\n

          const<\/span> toggleTheme =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
          \n setTheme<\/span>(<\/span>prev<\/span> =><\/span> prev ===<\/span> 'light'<\/span> ?<\/span> 'dark'<\/span> :<\/span> 'light'<\/span>)<\/span>;<\/span>
          \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

          const<\/span> value =<\/span> {<\/span>
          \n theme,<\/span>
          \n toggleTheme,<\/span>
          \n }<\/span>;<\/span><\/p>\n

          return<\/span> (<\/span>
          \n <<\/span>ThemeContext.<\/span>Provider value=<\/span>{<\/span>value}<\/span>><\/span>
          \n {<\/span>children}<\/span>
          \n <<\/span>\/<\/span>ThemeContext.<\/span>Provider><\/span>
          \n )<\/span>;<\/span>
          \n}<\/span>;<\/span><\/p>\n

          \/\/ \u4f7f\u7528 Context<\/span>
          \nconst<\/span> ThemedComponent<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span><\/p>\n

          return<\/span> (<\/span>
          \n <<\/span>View style=<\/span>{<\/span>{<\/span> backgroundColor<\/span>:<\/span> theme ===<\/span> 'light'<\/span> ?<\/span> '#FFFFFF'<\/span> :<\/span> '#000000'<\/span> }<\/span>}<\/span>><\/span>
          \n <<\/span>Text style=<\/span>{<\/span>{<\/span> color<\/span>:<\/span> theme ===<\/span> 'light'<\/span> ?<\/span> '#000000'<\/span> :<\/span> '#FFFFFF'<\/span> }<\/span>}<\/span>><\/span>
          \n \u5f53\u524d\u4e3b\u9898<\/span>:<\/span> {<\/span>theme}<\/span>
          \n <<\/span>\/<\/span>Text><\/span>
          \n <<\/span>TouchableOpacity onPress=<\/span>{<\/span>toggleTheme}<\/span>><\/span>
          \n <<\/span>Text><\/span>\u5207\u6362\u4e3b\u9898<<\/span>\/<\/span>Text><\/span>
          \n <<\/span>\/<\/span>TouchableOpacity><\/span>
          \n <<\/span>\/<\/span>View><\/span>
          \n )<\/span>;<\/span>
          \n}<\/span>;<\/span><\/p>\n

          \u539f\u56e0：<\/p>\n

            \n
          • \u5c06\u72b6\u6001\u548c\u65b9\u6cd5\u4e00\u8d77\u653e\u5728 Context \u4e2d<\/li>\n
          • \u4f7f\u7528 Provider \u5305\u88f9\u5e94\u7528<\/li>\n
          • \u5728\u9700\u8981\u7684\u7ec4\u4ef6\u4e2d\u4f7f\u7528 useContext<\/li>\n<\/ul>\n
            \u2705 \u6700\u4f73\u5b9e\u8df5 2：\u907f\u514d\u8fc7\u5ea6\u4f7f\u7528 Context<\/h5>\n

            \/\/ \u274c \u4e0d\u63a8\u8350：\u5c06\u6240\u6709\u72b6\u6001\u90fd\u653e\u5728 Context \u4e2d<\/span>
            \nconst<\/span> AppContext =<\/span> createContext<\/span>(<\/span>{<\/span>
            \n user<\/span>:<\/span> null<\/span>,<\/span>
            \n posts<\/span>:<\/span> [<\/span>]<\/span>,<\/span>
            \n comments<\/span>:<\/span> [<\/span>]<\/span>,<\/span>
            \n settings<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
            \n \/\/ … \u66f4\u591a\u72b6\u6001<\/span>
            \n}<\/span>)<\/span>;<\/span><\/p>\n

            \/\/ \u2705 \u63a8\u8350：\u6309\u529f\u80fd\u62c6\u5206 Context<\/span>
            \nconst<\/span> UserContext =<\/span> createContext<\/span>(<\/span>{<\/span> user<\/span>:<\/span> null<\/span>,<\/span> login<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span> logout<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span> }<\/span>)<\/span>;<\/span>
            \nconst<\/span> PostsContext =<\/span> createContext<\/span>(<\/span>{<\/span> posts<\/span>:<\/span> [<\/span>]<\/span>,<\/span> addPost<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span> removePost<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span> }<\/span>)<\/span>;<\/span>
            \nconst<\/span> CommentsContext =<\/span> createContext<\/span>(<\/span>{<\/span> comments<\/span>:<\/span> [<\/span>]<\/span>,<\/span> addComment<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span> }<\/span>)<\/span>;<\/span><\/p>\n

            \u539f\u56e0：<\/p>\n

              \n
            • \u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u6e32\u67d3<\/li>\n
            • \u66f4\u597d\u7684\u4ee3\u7801\u7ec4\u7ec7<\/li>\n
            • \u66f4\u5bb9\u6613\u7ef4\u62a4<\/li>\n<\/ul>\n
              \u2705 \u6700\u4f73\u5b9e\u8df5 3：\u4f7f\u7528\u81ea\u5b9a\u4e49 Hook \u5c01\u88c5 Context<\/h5>\n

              \/\/ \u274c \u4e0d\u63a8\u8350：\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u90fd\u4f7f\u7528 useContext<\/span>
              \nconst<\/span> Component1<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
              \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>
              \n \/\/ …<\/span>
              \n}<\/span>;<\/span><\/p>\n

              const<\/span> Component2<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
              \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>
              \n \/\/ …<\/span>
              \n}<\/span>;<\/span><\/p>\n

              \/\/ \u2705 \u63a8\u8350：\u4f7f\u7528\u81ea\u5b9a\u4e49 Hook \u5c01\u88c5<\/span>
              \nconst<\/span> useTheme<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
              \n const<\/span> context =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>
              \n if<\/span> (<\/span>!<\/span>context)<\/span> {<\/span>
              \n throw<\/span> new<\/span> Error<\/span>(<\/span>'useTheme must be used within a ThemeProvider'<\/span>)<\/span>;<\/span>
              \n }<\/span>
              \n return<\/span> context;<\/span>
              \n}<\/span>;<\/span><\/p>\n

              const<\/span> Component1<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
              \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useTheme<\/span>(<\/span>)<\/span>;<\/span>
              \n \/\/ …<\/span>
              \n}<\/span>;<\/span><\/p>\n

              const<\/span> Component2<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
              \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useTheme<\/span>(<\/span>)<\/span>;<\/span>
              \n \/\/ …<\/span>
              \n}<\/span>;<\/span><\/p>\n

              \u539f\u56e0：<\/p>\n

                \n
              • \u66f4\u6e05\u6670\u7684\u4ee3\u7801\u7ed3\u6784<\/li>\n
              • \u907f\u514d\u91cd\u590d\u4ee3\u7801<\/li>\n
              • \u7c7b\u578b\u5b89\u5168<\/li>\n<\/ul>\n

                \u4e09\u3001\u6df1\u5165\u7406\u89e3 useReducer<\/h3>\n

                1. useReducer \u662f\u4ec0\u4e48？<\/h4>\n

                useReducer \u662f React \u63d0\u4f9b\u7684\u4e00\u4e2a Hook，\u7528\u4e8e\u7ba1\u7406\u590d\u6742\u72b6\u6001\u903b\u8f91\u3002\u5b83\u662f useState \u7684\u66ff\u4ee3\u65b9\u6848，\u9002\u7528\u4e8e\u72b6\u6001\u903b\u8f91\u6bd4\u8f83\u590d\u6742\u6216\u4e0b\u4e00\u4e2a\u72b6\u6001\u4f9d\u8d56\u4e8e\u524d\u4e00\u4e2a\u72b6\u6001\u7684\u573a\u666f\u3002<\/p>\n

                2. \u4e3a\u4ec0\u4e48\u9700\u8981 useReducer？<\/h4>\n

                \u5728 React \u4e2d，\u5f53\u72b6\u6001\u903b\u8f91\u6bd4\u8f83\u590d\u6742\u65f6，\u4f7f\u7528 useState \u4f1a\u5bfc\u81f4\u4ee3\u7801\u53d8\u5f97\u96be\u4ee5\u7406\u89e3\u548c\u7ef4\u62a4\u3002useReducer \u63d0\u4f9b\u4e86\u4e00\u79cd\u5c06\u72b6\u6001\u66f4\u65b0\u903b\u8f91\u96c6\u4e2d\u7ba1\u7406\u7684\u65b9\u5f0f，\u4f7f\u4ee3\u7801\u66f4\u52a0\u6e05\u6670\u548c\u53ef\u7ef4\u62a4\u3002<\/p>\n

                useReducer \u7684\u4f18\u52bf\u5305\u62ec：<\/p>\n

              • \u903b\u8f91\u96c6\u4e2d：\u6240\u6709\u72b6\u6001\u66f4\u65b0\u903b\u8f91\u90fd\u5728 reducer \u51fd\u6570\u4e2d<\/li>\n
              • \u6613\u4e8e\u6d4b\u8bd5：reducer \u662f\u7eaf\u51fd\u6570，\u6613\u4e8e\u6d4b\u8bd5<\/li>\n
              • \u53ef\u9884\u6d4b\u6027：\u72b6\u6001\u66f4\u65b0\u662f\u53ef\u9884\u6d4b\u7684，\u57fa\u4e8e action \u7c7b\u578b<\/li>\n
              • \u9002\u5408\u590d\u6742\u72b6\u6001：\u9002\u5408\u7ba1\u7406\u590d\u6742\u7684\u72b6\u6001\u903b\u8f91<\/li>\n

                3. useReducer \u7684\u57fa\u672c\u8bed\u6cd5<\/h4>\n

                const<\/span> [<\/span>state,<\/span> dispatch]<\/span> =<\/span> useReducer<\/span>(<\/span>reducer,<\/span> initialState)<\/span>;<\/span><\/p>\n

                \u53c2\u6570\u8bf4\u660e：<\/p>\n

                  \n
                • reducer：reducer \u51fd\u6570，\u63a5\u53d7\u5f53\u524d\u72b6\u6001\u548c action，\u8fd4\u56de\u65b0\u72b6\u6001<\/li>\n
                • initialState：\u521d\u59cb\u72b6\u6001<\/li>\n<\/ul>\n

                  \u8fd4\u56de\u503c：<\/p>\n

                    \n
                  • state：\u5f53\u524d\u72b6\u6001<\/li>\n
                  • dispatch：dispatch \u51fd\u6570，\u7528\u4e8e\u89e6\u53d1\u72b6\u6001\u66f4\u65b0<\/li>\n<\/ul>\n

                    4. useReducer \u7684\u5de5\u4f5c\u539f\u7406<\/h4>\n

                    \u5f53\u4f60\u8c03\u7528 useReducer(reducer, initialState) \u65f6，React \u4f1a：<\/p>\n

                  • \u521d\u59cb\u5316\u72b6\u6001：\u4f7f\u7528 initialState \u521d\u59cb\u5316\u72b6\u6001<\/li>\n
                  • \u8fd4\u56de\u72b6\u6001\u548c dispatch：\u8fd4\u56de\u5f53\u524d\u72b6\u6001\u548c dispatch \u51fd\u6570<\/li>\n
                  • \u5904\u7406 action：\u5f53\u8c03\u7528 dispatch(action) \u65f6：\n
                      \n
                    • \u8c03\u7528 reducer \u51fd\u6570，\u4f20\u5165\u5f53\u524d\u72b6\u6001\u548c action<\/li>\n
                    • \u6839\u636e action \u7c7b\u578b\u8ba1\u7b97\u65b0\u72b6\u6001<\/li>\n
                    • \u66f4\u65b0\u72b6\u6001\u5e76\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6<\/li>\n<\/ul>\n<\/li>\n

                      5. useReducer \u7684\u7c7b\u578b\u5b9a\u4e49<\/h4>\n

                      function<\/span> useReducer<\/span><<\/span>R<\/span> extends<\/span> Reducer<<\/span>any<\/span>,<\/span> any<\/span>><\/span>,<\/span> I<\/span>><\/span><\/span><\/span>(<\/span>
                      \n reducer:<\/span> R<\/span>,<\/span>
                      \n initialState:<\/span> I<\/span> &<\/span> ReducerState<<\/span>R<\/span>><\/span>,<\/span>
                      \n initializer?<\/span>:<\/span> undefined<\/span>
                      \n)<\/span>:<\/span> [<\/span>I<\/span> &<\/span> ReducerState<<\/span>R<\/span>><\/span>,<\/span> Dispatch<<\/span>ReducerAction<<\/span>R<\/span>>><\/span>]<\/span>;<\/span><\/p>\n

                      \u8fd9\u4e2a\u5b9a\u4e49\u544a\u8bc9\u6211\u4eec：<\/p>\n

                        \n
                      • useReducer \u63a5\u53d7\u4e00\u4e2a\u6cdb\u578b\u53c2\u6570 R，\u8868\u793a reducer \u51fd\u6570\u7684\u7c7b\u578b<\/li>\n
                      • reducer：reducer \u51fd\u6570，\u7c7b\u578b\u4e3a Reducer<any, any><\/li>\n
                      • initialState：\u521d\u59cb\u72b6\u6001<\/li>\n
                      • initializer：\u53ef\u9009\u7684\u521d\u59cb\u5316\u51fd\u6570<\/li>\n
                      • \u8fd4\u56de\u503c：\u4e00\u4e2a\u5143\u7ec4，\u5305\u542b\u72b6\u6001\u548c dispatch \u51fd\u6570<\/li>\n<\/ul>\n

                        6. useReducer \u7684\u4f7f\u7528\u573a\u666f<\/h4>\n

                        useReducer\u9002\u7528\u4e8e\u4ee5\u4e0b\u573a\u666f：<\/p>\n

                          \n
                        • \u590d\u6742\u72b6\u6001\u903b\u8f91：\u72b6\u6001\u66f4\u65b0\u903b\u8f91\u6bd4\u8f83\u590d\u6742<\/li>\n
                        • \u591a\u4e2a\u76f8\u5173\u72b6\u6001：\u591a\u4e2a\u72b6\u6001\u4e4b\u95f4\u6709\u4f9d\u8d56\u5173\u7cfb<\/li>\n
                        • \u4e0b\u4e00\u4e2a\u72b6\u6001\u4f9d\u8d56\u4e8e\u524d\u4e00\u4e2a\u72b6\u6001：\u5982\u8ba1\u6570\u5668\u3001\u8d2d\u7269\u8f66\u7b49<\/li>\n
                        • \u72b6\u6001\u66f4\u65b0\u6a21\u5f0f：\u6709\u56fa\u5b9a\u7684\u72b6\u6001\u66f4\u65b0\u6a21\u5f0f<\/li>\n
                        • \u53ef\u9884\u6d4b\u7684\u72b6\u6001\u66f4\u65b0：\u9700\u8981\u53ef\u9884\u6d4b\u7684\u72b6\u6001\u66f4\u65b0<\/li>\n<\/ul>\n

                          7. useReducer \u7684\u6700\u4f73\u5b9e\u8df5<\/h4>\n

                          \u2705 \u6700\u4f73\u5b9e\u8df5 1：\u6b63\u786e\u5b9a\u4e49 action \u7c7b\u578b<\/h5>\n

                          \/\/ \u274c \u4e0d\u63a8\u8350：\u4f7f\u7528\u5b57\u7b26\u4e32\u4f5c\u4e3a action \u7c7b\u578b<\/span>
                          \nconst<\/span> reducer<\/span> =<\/span> (<\/span>state,<\/span> action<\/span>)<\/span> =><\/span> {<\/span>
                          \n switch<\/span> (<\/span>action)<\/span> {<\/span>
                          \n case<\/span> 'increment'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>
                          \n case<\/span> 'decrement'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> state.<\/span>count –<\/span> 1<\/span> }<\/span>;<\/span>
                          \n default<\/span>:<\/span>
                          \n return<\/span> state;<\/span>
                          \n }<\/span>
                          \n}<\/span>;<\/span><\/p>\n

                          \/\/ \u2705 \u63a8\u8350：\u4f7f\u7528\u5bf9\u8c61\u4f5c\u4e3a action \u7c7b\u578b<\/span>
                          \ntype CounterAction =<\/span>
                          \n |<\/span> {<\/span> type<\/span>:<\/span> 'increment'<\/span> }<\/span>
                          \n |<\/span> {<\/span> type<\/span>:<\/span> 'decrement'<\/span> }<\/span>
                          \n |<\/span> {<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>
                          \n |<\/span> {<\/span> type<\/span>:<\/span> 'setCount'<\/span>;<\/span> value:<\/span> number }<\/span>;<\/span><\/p>\n

                          const<\/span> reducer =<\/span> (<\/span>state:<\/span> CounterState,<\/span> action<\/span>:<\/span> CounterAction)<\/span>:<\/span> CounterState<\/span> =><\/span> {<\/span>
                          \n switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                          \n case<\/span> 'increment'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>
                          \n case<\/span> 'decrement'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> state.<\/span>count –<\/span> 1<\/span> }<\/span>;<\/span>
                          \n case<\/span> 'reset'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> 0<\/span> }<\/span>;<\/span>
                          \n case<\/span> 'setCount'<\/span>:<\/span>
                          \n return<\/span> {<\/span> count<\/span>:<\/span> action.<\/span>value }<\/span>;<\/span>
                          \n default<\/span>:<\/span>
                          \n return<\/span> state;<\/span>
                          \n }<\/span>
                          \n}<\/span>;<\/span><\/p>\n

                          \u539f\u56e0：<\/p>\n

                            \n
                          • \u7c7b\u578b\u5b89\u5168<\/li>\n
                          • \u66f4\u597d\u7684 IDE \u652f\u6301<\/li>\n
                          • \u907f\u514d\u62fc\u5199\u9519\u8bef<\/li>\n<\/ul>\n
                            \u2705 \u6700\u4f73\u5b9e\u8df5 2：\u6b63\u786e\u4f7f\u7528 dispatch<\/h5>\n

                            \/\/ \u274c \u4e0d\u63a8\u8350：\u76f4\u63a5\u4fee\u6539\u72b6\u6001<\/span>
                            \nconst<\/span> handleIncrement<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                            \n setState<\/span>(<\/span>prev<\/span> =><\/span> (<\/span>{<\/span> …<\/span>prev,<\/span> count<\/span>:<\/span> prev.<\/span>count +<\/span> 1<\/span> }<\/span>)<\/span>)<\/span>;<\/span>
                            \n}<\/span>;<\/span><\/p>\n

                            \/\/ \u2705 \u63a8\u8350：\u4f7f\u7528 dispatch \u89e6\u53d1\u72b6\u6001\u66f4\u65b0<\/span>
                            \nconst<\/span> handleIncrement<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                            \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'increment'<\/span> }<\/span>)<\/span>;<\/span>
                            \n}<\/span>;<\/span><\/p>\n

                            \u539f\u56e0：<\/p>\n

                              \n
                            • \u72b6\u6001\u66f4\u65b0\u903b\u8f91\u96c6\u4e2d\u5728 reducer \u4e2d<\/li>\n
                            • \u66f4\u597d\u7684\u53ef\u7ef4\u62a4\u6027<\/li>\n
                            • \u66f4\u5bb9\u6613\u8c03\u8bd5<\/li>\n<\/ul>\n
                              \u2705 \u6700\u4f73\u5b9e\u8df5 \u2462：\u62c6\u5206\u590d\u6742 reducer<\/h5>\n

                              \/\/ \u274c \u4e0d\u63a8\u8350：\u4e00\u4e2a reducer \u5904\u7406\u6240\u6709\u903b\u8f91<\/span>
                              \nconst<\/span> reducer<\/span> =<\/span> (<\/span>state,<\/span> action<\/span>)<\/span> =><\/span> {<\/span>
                              \n switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                              \n case<\/span> 'increment'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> count<\/span>:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'decrement'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> count<\/span>:<\/span> state.<\/span>count –<\/span> 1<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'addItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> [<\/span>…<\/span>state.<\/span>items,<\/span> action.<\/span>item]<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'removeItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> state.<\/span>items.<\/span>filter<\/span>(<\/span>item<\/span> =><\/span> item.<\/span>id !==<\/span> action.<\/span>id)<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'updateItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> state.<\/span>items.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> item.<\/span>id ===<\/span> action.<\/span>id ?<\/span> action.<\/span>item :<\/span> item)<\/span> }<\/span>;<\/span>
                              \n \/\/ … \u66f4\u591a case<\/span>
                              \n default<\/span>:<\/span>
                              \n return<\/span> state;<\/span>
                              \n }<\/span>
                              \n}<\/span>;<\/span><\/p>\n

                              \/\/ \u2705 \u63a8\u8350：\u62c6\u5206\u6210\u591a\u4e2a reducer<\/span>
                              \nconst<\/span> counterReducer =<\/span> (<\/span>state:<\/span> CounterState,<\/span> action<\/span>:<\/span> CounterAction)<\/span>:<\/span> CounterState<\/span> =><\/span> {<\/span>
                              \n switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                              \n case<\/span> 'increment'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> count<\/span>:<\/span> state.<\/span>count +<\/span> 1<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'decrement'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> count<\/span>:<\/span> state.<\/span>count –<\/span> 1<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'reset'<\/span>:<\/span>
                              \n return<\/span> {<\/span> count<\/span>:<\/span> 0<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'setCount'<\/span>:<\/span>
                              \n return<\/span> {<\/span> count<\/span>:<\/span> action.<\/span>value }<\/span>;<\/span>
                              \n default<\/span>:<\/span>
                              \n return<\/span> state;<\/span>
                              \n }<\/span>
                              \n}<\/span>;<\/span><\/p>\n

                              const<\/span> itemsReducer =<\/span> (<\/span>state:<\/span> ItemsState,<\/span> action<\/span>:<\/span> ItemsAction)<\/span>:<\/span> ItemsState<\/span> =><\/span> {<\/span>
                              \n switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                              \n case<\/span> 'addItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> [<\/span>…<\/span>state.<\/span>items,<\/span> action.<\/span>item]<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'removeItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> state.<\/span>items.<\/span>filter<\/span>(<\/span>item<\/span> =><\/span> item.<\/span>id !==<\/span> action.<\/span>id)<\/span> }<\/span>;<\/span>
                              \n case<\/span> 'updateItem'<\/span>:<\/span>
                              \n return<\/span> {<\/span> …<\/span>state,<\/span> items<\/span>:<\/span> state.<\/span>items.<\/span>map<\/span>(<\/span>item<\/span> =><\/span> item.<\/span>id ===<\/span> action.<\/span>id ?<\/span> action.<\/span>item :<\/span> item)<\/span> }<\/span>;<\/span>
                              \n default<\/span>:<\/span>
                              \n return<\/span> state;<\/span>
                              \n }<\/span>
                              \n}<\/span>;<\/span><\/p>\n

                              \/\/ \u4f7f\u7528 combineReducers \u5408\u5e76 reducer<\/span>
                              \nconst<\/span> rootReducer =<\/span> combineReducers<\/span>(<\/span>{<\/span>
                              \n counter<\/span>:<\/span> counterReducer,<\/span>
                              \n items<\/span>:<\/span> itemsReducer,<\/span>
                              \n}<\/span>)<\/span>;<\/span><\/p>\n

                              \u539f\u56e0：<\/p>\n

                                \n
                              • \u66f4\u6e05\u6670\u7684\u4ee3\u7801\u7ed3\u6784<\/li>\n
                              • \u66f4\u5bb9\u6613\u7ef4\u62a4<\/li>\n
                              • \u66f4\u5bb9\u6613\u6d4b\u8bd5<\/li>\n<\/ul>\n

                                \u56db\u3001\u5b9e\u6218\u5b8c\u6574\u7248：\u4f01\u4e1a\u7ea7\u901a\u7528 useContext \u548c useReducer<\/h3>\n

                                import<\/span> React,<\/span> {<\/span> useState,<\/span> useReducer,<\/span> useCallback,<\/span> useContext,<\/span> createContext,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>
                                \nimport<\/span> {<\/span>
                                \n View,<\/span>
                                \n Text,<\/span>
                                \n StyleSheet,<\/span>
                                \n TouchableOpacity,<\/span>
                                \n SafeAreaView,<\/span>
                                \n ScrollView,<\/span>
                                \n TextInput,<\/span>
                                \n FlatList,<\/span>
                                \n}<\/span> from<\/span> 'react-native'<\/span>;<\/span><\/p>\n

                                \/\/ ========== Context \u5b9a\u4e49 ==========<\/span><\/p>\n

                                \/\/ \u4e3b\u9898 Context<\/span>
                                \ntype Theme =<\/span> 'light'<\/span> |<\/span> 'dark'<\/span>;<\/span><\/p>\n

                                interface<\/span> ThemeContextType<\/span> {<\/span>
                                \n theme<\/span>:<\/span> Theme;<\/span>
                                \n toggleTheme<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>;<\/span>
                                \n}<\/span><\/p>\n

                                const<\/span> ThemeContext =<\/span> createContext<<\/span>ThemeContextType><\/span>(<\/span>{<\/span>
                                \n theme<\/span>:<\/span> 'light'<\/span>,<\/span>
                                \n toggleTheme<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
                                \n}<\/span>)<\/span>;<\/span><\/p>\n

                                \/\/ \u7528\u6237 Context<\/span>
                                \ninterface<\/span> User<\/span> {<\/span>
                                \n id<\/span>:<\/span> string;<\/span>
                                \n name<\/span>:<\/span> string;<\/span>
                                \n email<\/span>:<\/span> string;<\/span>
                                \n}<\/span><\/p>\n

                                interface<\/span> AuthContextType<\/span> {<\/span>
                                \n user<\/span>:<\/span> User |<\/span> null<\/span>;<\/span>
                                \n isAuthenticated<\/span>:<\/span> boolean;<\/span>
                                \n isLoading<\/span>:<\/span> boolean;<\/span>
                                \n error<\/span>:<\/span> string |<\/span> null<\/span>;<\/span>
                                \n login<\/span>:<\/span> (<\/span>username<\/span>:<\/span> string,<\/span> password<\/span>:<\/span> string<\/span>)<\/span> =><\/span> Promise<<\/span>void<\/span>><\/span>;<\/span>
                                \n logout<\/span>:<\/span> (<\/span>)<\/span> =><\/span> void<\/span>;<\/span>
                                \n}<\/span><\/p>\n

                                const<\/span> AuthContext =<\/span> createContext<<\/span>AuthContextType><\/span>(<\/span>{<\/span>
                                \n user<\/span>:<\/span> null<\/span>,<\/span>
                                \n isAuthenticated<\/span>:<\/span> false<\/span>,<\/span>
                                \n isLoading<\/span>:<\/span> false<\/span>,<\/span>
                                \n error<\/span>:<\/span> null<\/span>,<\/span>
                                \n login<\/span>:<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
                                \n logout<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
                                \n}<\/span>)<\/span>;<\/span><\/p>\n

                                \/\/ ========== Reducer \u5b9a\u4e49 ==========<\/span><\/p>\n

                                \/\/ \u8ba1\u6570\u5668 Reducer<\/span>
                                \ninterface<\/span> CounterState<\/span> {<\/span>
                                \n count<\/span>:<\/span> number;<\/span>
                                \n history<\/span>:<\/span> number[<\/span>]<\/span>;<\/span>
                                \n}<\/span><\/p>\n

                                type CounterAction =<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'increment'<\/span> }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'decrement'<\/span> }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'setCount'<\/span>;<\/span> value:<\/span> number }<\/span>;<\/span><\/p>\n

                                const<\/span> counterReducer =<\/span> (<\/span>state:<\/span> CounterState,<\/span> action<\/span>:<\/span> CounterAction)<\/span>:<\/span> CounterState<\/span> =><\/span> {<\/span>
                                \n let<\/span> newCount<\/span>:<\/span> number;<\/span><\/p>\n

                                switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                                \n case<\/span> 'increment'<\/span>:<\/span>
                                \n newCount =<\/span> state.<\/span>count +<\/span> 1<\/span>;<\/span>
                                \n return<\/span> {<\/span>
                                \n count<\/span>:<\/span> newCount,<\/span>
                                \n history<\/span>:<\/span> [<\/span>…<\/span>state.<\/span>history,<\/span> newCount]<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n case<\/span> 'decrement'<\/span>:<\/span>
                                \n newCount =<\/span> state.<\/span>count –<\/span> 1<\/span>;<\/span>
                                \n return<\/span> {<\/span>
                                \n count<\/span>:<\/span> newCount,<\/span>
                                \n history<\/span>:<\/span> [<\/span>…<\/span>state.<\/span>history,<\/span> newCount]<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n case<\/span> 'reset'<\/span>:<\/span>
                                \n return<\/span> {<\/span> count<\/span>:<\/span> 0<\/span>,<\/span> history<\/span>:<\/span> [<\/span>]<\/span> }<\/span>;<\/span>
                                \n case<\/span> 'setCount'<\/span>:<\/span>
                                \n return<\/span> {<\/span>
                                \n count<\/span>:<\/span> action.<\/span>value,<\/span>
                                \n history<\/span>:<\/span> [<\/span>…<\/span>state.<\/span>history,<\/span> action.<\/span>value]<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n default<\/span>:<\/span>
                                \n return<\/span> state;<\/span>
                                \n }<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ \u8868\u5355 Reducer<\/span>
                                \ninterface<\/span> FormState<\/span> {<\/span>
                                \n values<\/span>:<\/span> Record<<\/span>string,<\/span> string><\/span>;<\/span>
                                \n errors<\/span>:<\/span> Record<<\/span>string,<\/span> string><\/span>;<\/span>
                                \n touched<\/span>:<\/span> Record<<\/span>string,<\/span> boolean><\/span>;<\/span>
                                \n isValid<\/span>:<\/span> boolean;<\/span>
                                \n}<\/span><\/p>\n

                                type FormAction =<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'setValue'<\/span>;<\/span> field:<\/span> string;<\/span> value:<\/span> string }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'setError'<\/span>;<\/span> field:<\/span> string;<\/span> error:<\/span> string }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'setTouched'<\/span>;<\/span> field:<\/span> string;<\/span> touched:<\/span> boolean }<\/span>
                                \n |<\/span> {<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>;<\/span><\/p>\n

                                const<\/span> formReducer =<\/span> (<\/span>state:<\/span> FormState,<\/span> action<\/span>:<\/span> FormAction)<\/span>:<\/span> FormState<\/span> =><\/span> {<\/span>
                                \n switch<\/span> (<\/span>action.<\/span>type)<\/span> {<\/span>
                                \n case<\/span> 'setValue'<\/span>:<\/span>
                                \n return<\/span> {<\/span>
                                \n …<\/span>state,<\/span>
                                \n values<\/span>:<\/span> {<\/span> …<\/span>state.<\/span>values,<\/span> [<\/span>action.<\/span>field]<\/span>:<\/span> action.<\/span>value }<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n case<\/span> 'setError'<\/span>:<\/span>
                                \n return<\/span> {<\/span>
                                \n …<\/span>state,<\/span>
                                \n errors<\/span>:<\/span> {<\/span> …<\/span>state.<\/span>errors,<\/span> [<\/span>action.<\/span>field]<\/span>:<\/span> action.<\/span>error }<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n case<\/span> 'setTouched'<\/span>:<\/span>
                                \n return<\/span> {<\/span>
                                \n …<\/span>state,<\/span>
                                \n touched<\/span>:<\/span> {<\/span> …<\/span>state.<\/span>touched,<\/span> [<\/span>action.<\/span>field]<\/span>:<\/span> action.<\/span>touched }<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n case<\/span> 'reset'<\/span>:<\/span>
                                \n return<\/span> {<\/span>
                                \n values<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n errors<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n touched<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n isValid<\/span>:<\/span> true<\/span>,<\/span>
                                \n }<\/span>;<\/span>
                                \n default<\/span>:<\/span>
                                \n return<\/span> state;<\/span>
                                \n }<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ ========== Provider \u7ec4\u4ef6 ==========<\/span><\/p>\n

                                const<\/span> AppProvider<\/span> =<\/span> (<\/span>{<\/span> children }<\/span>:<\/span> {<\/span> children<\/span>:<\/span> React.<\/span>ReactNode }<\/span><\/span>)<\/span> =><\/span> {<\/span>
                                \n \/\/ \u4e3b\u9898\u72b6\u6001<\/span>
                                \n const<\/span> [<\/span>theme,<\/span> setTheme]<\/span> =<\/span> useState<<\/span>Theme><\/span>(<\/span>'light'<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> toggleTheme =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n setTheme<\/span>(<\/span>prev<\/span> =><\/span> prev ===<\/span> 'light'<\/span> ?<\/span> 'dark'<\/span> :<\/span> 'light'<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> themeValue<\/span>:<\/span> ThemeContextType =<\/span> {<\/span>
                                \n theme,<\/span>
                                \n toggleTheme,<\/span>
                                \n }<\/span>;<\/span><\/p>\n

                                \/\/ \u8ba4\u8bc1\u72b6\u6001<\/span>
                                \n const<\/span> [<\/span>user,<\/span> setUser]<\/span> =<\/span> useState<<\/span>User |<\/span> null<\/span>><\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                                \n const<\/span> [<\/span>isAuthenticated,<\/span> setIsAuthenticated]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span>
                                \n const<\/span> [<\/span>isLoading,<\/span> setIsLoading]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span>
                                \n const<\/span> [<\/span>error,<\/span> setError]<\/span> =<\/span> useState<<\/span>string |<\/span> null<\/span>><\/span>(<\/span>null<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> login =<\/span> useCallback<\/span>(<\/span>async<\/span> (<\/span>username<\/span>:<\/span> string,<\/span> password<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
                                \n setIsLoading<\/span>(<\/span>true<\/span>)<\/span>;<\/span>
                                \n setError<\/span>(<\/span>null<\/span>)<\/span>;<\/span><\/p>\n

                                try<\/span> {<\/span>
                                \n await<\/span> new<\/span> Promise<\/span>(<\/span>resolve<\/span> =><\/span> setTimeout<\/span>(<\/span>resolve,<\/span> 1000<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

                                if<\/span> (<\/span>username ===<\/span> 'admin'<\/span> &&<\/span> password ===<\/span> '123456'<\/span>)<\/span> {<\/span>
                                \n setUser<\/span>(<\/span>{<\/span> id<\/span>:<\/span> '1'<\/span>,<\/span> name<\/span>:<\/span> '\u7ba1\u7406\u5458'<\/span>,<\/span> email<\/span>:<\/span> 'admin@example.com'<\/span> }<\/span>)<\/span>;<\/span>
                                \n setIsAuthenticated<\/span>(<\/span>true<\/span>)<\/span>;<\/span>
                                \n }<\/span> else<\/span> {<\/span>
                                \n setError<\/span>(<\/span>'\u7528\u6237\u540d\u6216\u5bc6\u7801\u9519\u8bef'<\/span>)<\/span>;<\/span>
                                \n }<\/span>
                                \n }<\/span> catch<\/span> (<\/span>err)<\/span> {<\/span>
                                \n setError<\/span>(<\/span>'\u767b\u5f55\u5931\u8d25，\u8bf7\u7a0d\u540e\u91cd\u8bd5'<\/span>)<\/span>;<\/span>
                                \n }<\/span> finally<\/span> {<\/span>
                                \n setIsLoading<\/span>(<\/span>false<\/span>)<\/span>;<\/span>
                                \n }<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> logout =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n setUser<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                                \n setIsAuthenticated<\/span>(<\/span>false<\/span>)<\/span>;<\/span>
                                \n setError<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> authValue<\/span>:<\/span> AuthContextType =<\/span> {<\/span>
                                \n user,<\/span>
                                \n isAuthenticated,<\/span>
                                \n isLoading,<\/span>
                                \n error,<\/span>
                                \n login,<\/span>
                                \n logout,<\/span>
                                \n }<\/span>;<\/span><\/p>\n

                                return<\/span> (<\/span>
                                \n <<\/span>ThemeContext.<\/span>Provider value=<\/span>{<\/span>themeValue}<\/span>><\/span>
                                \n <<\/span>AuthContext.<\/span>Provider value=<\/span>{<\/span>authValue}<\/span>><\/span>
                                \n {<\/span>children}<\/span>
                                \n <<\/span>\/<\/span>AuthContext.<\/span>Provider><\/span>
                                \n <<\/span>\/<\/span>ThemeContext.<\/span>Provider><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ ========== \u81ea\u5b9a\u4e49 Hook ==========<\/span><\/p>\n

                                const<\/span> useTheme<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> context =<\/span> useContext<\/span>(<\/span>ThemeContext)<\/span>;<\/span>
                                \n if<\/span> (<\/span>!<\/span>context)<\/span> {<\/span>
                                \n throw<\/span> new<\/span> Error<\/span>(<\/span>'useTheme must be used within AppProvider'<\/span>)<\/span>;<\/span>
                                \n }<\/span>
                                \n return<\/span> context;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                const<\/span> useAuth<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> context =<\/span> useContext<\/span>(<\/span>AuthContext)<\/span>;<\/span>
                                \n if<\/span> (<\/span>!<\/span>context)<\/span> {<\/span>
                                \n throw<\/span> new<\/span> Error<\/span>(<\/span>'useAuth must be used within AppProvider'<\/span>)<\/span>;<\/span>
                                \n }<\/span>
                                \n return<\/span> context;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ ========== \u793a\u4f8b\u7ec4\u4ef6 ==========<\/span><\/p>\n

                                \/\/ useContext \u793a\u4f8b：\u4e3b\u9898\u5207\u6362<\/span>
                                \nconst<\/span> ThemeExample<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> {<\/span> theme,<\/span> toggleTheme }<\/span> =<\/span> useTheme<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                                return<\/span> (<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>card}<\/span>><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardHeader}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>cardTitle}<\/span>><\/span>useContext \u793a\u4f8b：\u4e3b\u9898\u5207\u6362<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardBody}<\/span>><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>[<\/span>
                                \n styles.<\/span>themePreview,<\/span>
                                \n theme ===<\/span> 'dark'<\/span> ?<\/span> styles.<\/span>darkThemePreview :<\/span> null<\/span>,<\/span>
                                \n ]<\/span>}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>[<\/span>
                                \n styles.<\/span>themeText,<\/span>
                                \n theme ===<\/span> 'dark'<\/span> ?<\/span> styles.<\/span>darkThemeText :<\/span> null<\/span>,<\/span>
                                \n ]<\/span>}<\/span>><\/span>
                                \n \u5f53\u524d\u4e3b\u9898<\/span>:<\/span> {<\/span>theme ===<\/span> 'light'<\/span> ?<\/span> '\u6d45\u8272\u6a21\u5f0f'<\/span> :<\/span> '\u6df1\u8272\u6a21\u5f0f'<\/span>}<\/span>
                                \n <<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>styles.<\/span>button}<\/span>
                                \n onPress=<\/span>{<\/span>toggleTheme}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>\u5207\u6362\u4e3b\u9898<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ useContext \u793a\u4f8b：\u7528\u6237\u8ba4\u8bc1<\/span>
                                \nconst<\/span> AuthExample<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> {<\/span> user,<\/span> isAuthenticated,<\/span> isLoading,<\/span> error,<\/span> login,<\/span> logout }<\/span> =<\/span> useAuth<\/span>(<\/span>)<\/span>;<\/span>
                                \n const<\/span> [<\/span>username,<\/span> setUsername]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
                                \n const<\/span> [<\/span>password,<\/span> setPassword]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> handleLogin =<\/span> useCallback<\/span>(<\/span>async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n await<\/span> login<\/span>(<\/span>username,<\/span> password)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>login,<\/span> username,<\/span> password]<\/span>)<\/span>;<\/span><\/p>\n

                                return<\/span> (<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>card}<\/span>><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardHeader}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>cardTitle}<\/span>><\/span>useContext \u793a\u4f8b：\u7528\u6237\u8ba4\u8bc1<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardBody}<\/span>><\/span>
                                \n {<\/span>isAuthenticated ?<\/span> (<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>authInfo}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>authLabel}<\/span>><\/span>\u7528\u6237\u4fe1\u606f:<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>authValue}<\/span>><\/span>\u59d3\u540d:<\/span> {<\/span>user?.<\/span>name}<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>authValue}<\/span>><\/span>\u90ae\u7bb1:<\/span> {<\/span>user?.<\/span>email}<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>styles.<\/span>button}<\/span>
                                \n onPress=<\/span>{<\/span>logout}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>\u9000\u51fa\u767b\u5f55<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n )<\/span> :<\/span> (<\/span>
                                \n <<\/span>><\/span>
                                \n <<\/span>TextInput
                                \n style=<\/span>{<\/span>styles.<\/span>input}<\/span>
                                \n placeholder=<\/span>"\u7528\u6237\u540d"<\/span>
                                \n value=<\/span>{<\/span>username}<\/span>
                                \n onChangeText=<\/span>{<\/span>setUsername}<\/span>
                                \n \/<\/span>><\/span>
                                \n <<\/span>TextInput
                                \n style=<\/span>{<\/span>styles.<\/span>input}<\/span>
                                \n placeholder=<\/span>"\u5bc6\u7801"<\/span>
                                \n value=<\/span>{<\/span>password}<\/span>
                                \n onChangeText=<\/span>{<\/span>setPassword}<\/span>
                                \n secureTextEntry
                                \n \/<\/span>><\/span>
                                \n {<\/span>error &&<\/span> <<\/span>Text style=<\/span>{<\/span>styles.<\/span>errorText}<\/span>><\/span>{<\/span>error}<\/span><<\/span>\/<\/span>Text><\/span>}<\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>styles.<\/span>button}<\/span>
                                \n onPress=<\/span>{<\/span>handleLogin}<\/span>
                                \n disabled=<\/span>{<\/span>isLoading}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>
                                \n {<\/span>isLoading ?<\/span> '\u767b\u5f55\u4e2d…'<\/span> :<\/span> '\u767b\u5f55'<\/span>}<\/span>
                                \n <<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>\/<\/span>><\/span>
                                \n )<\/span>}<\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ useReducer \u793a\u4f8b：\u8ba1\u6570\u5668<\/span>
                                \nconst<\/span> CounterExample<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> [<\/span>state,<\/span> dispatch]<\/span> =<\/span> useReducer<\/span>(<\/span>counterReducer,<\/span> {<\/span>
                                \n count<\/span>:<\/span> 0<\/span>,<\/span>
                                \n history<\/span>:<\/span> [<\/span>]<\/span>,<\/span>
                                \n }<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> increment =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'increment'<\/span> }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> decrement =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'decrement'<\/span> }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> reset =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> setCount =<\/span> useCallback<\/span>(<\/span>(<\/span>value<\/span>:<\/span> number<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'setCount'<\/span>,<\/span> value }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                return<\/span> (<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>card}<\/span>><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardHeader}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>cardTitle}<\/span>><\/span>useReducer \u793a\u4f8b：\u8ba1\u6570\u5668<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardBody}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>countText}<\/span>><\/span>{<\/span>state.<\/span>count}<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>buttonRow}<\/span>><\/span>
                                \n <<\/span>TouchableOpacity style=<\/span>{<\/span>styles.<\/span>button}<\/span> onPress=<\/span>{<\/span>decrement}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>–<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>[<\/span>styles.<\/span>button,<\/span> styles.<\/span>resetButton]<\/span>}<\/span>
                                \n onPress=<\/span>{<\/span>reset}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>\u91cd\u7f6e<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>TouchableOpacity style=<\/span>{<\/span>styles.<\/span>button}<\/span> onPress=<\/span>{<\/span>increment}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>+<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>historyContainer}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>historyLabel}<\/span>><\/span>\u5386\u53f2\u8bb0\u5f55:<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>historyValue}<\/span>><\/span>{<\/span>state.<\/span>history.<\/span>join<\/span>(<\/span>', '<\/span>)<\/span> ||<\/span> '\u65e0'<\/span>}<\/span><<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ useReducer \u793a\u4f8b：\u8868\u5355\u9a8c\u8bc1<\/span>
                                \nconst<\/span> FormExample<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> [<\/span>state,<\/span> dispatch]<\/span> =<\/span> useReducer<\/span>(<\/span>formReducer,<\/span> {<\/span>
                                \n values<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n errors<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n touched<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
                                \n isValid<\/span>:<\/span> true<\/span>,<\/span>
                                \n }<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> validateField =<\/span> useCallback<\/span>(<\/span>(<\/span>field<\/span>:<\/span> string,<\/span> value<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
                                \n let<\/span> error =<\/span> ''<\/span>;<\/span>
                                \n const<\/span> trimmedValue =<\/span> value ?<\/span> value.<\/span>trim<\/span>(<\/span>)<\/span> :<\/span> ''<\/span>;<\/span><\/p>\n

                                switch<\/span> (<\/span>field)<\/span> {<\/span>
                                \n case<\/span> 'username'<\/span>:<\/span>
                                \n if<\/span> (<\/span>!<\/span>trimmedValue)<\/span> {<\/span>
                                \n error =<\/span> '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a'<\/span>;<\/span>
                                \n }<\/span> else<\/span> if<\/span> (<\/span>trimmedValue.<\/span>length <<\/span> 3<\/span>)<\/span> {<\/span>
                                \n error =<\/span> '\u7528\u6237\u540d\u81f3\u5c113\u4e2a\u5b57\u7b26'<\/span>;<\/span>
                                \n }<\/span>
                                \n break<\/span>;<\/span>
                                \n case<\/span> 'email'<\/span>:<\/span>
                                \n if<\/span> (<\/span>!<\/span>trimmedValue)<\/span> {<\/span>
                                \n error =<\/span> '\u90ae\u7bb1\u4e0d\u80fd\u4e3a\u7a7a'<\/span>;<\/span>
                                \n }<\/span> else<\/span> if<\/span> (<\/span>!<\/span>\/<\/span>^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$<\/span>\/<\/span><\/span>.<\/span>test<\/span>(<\/span>trimmedValue)<\/span>)<\/span> {<\/span>
                                \n error =<\/span> '\u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e'<\/span>;<\/span>
                                \n }<\/span>
                                \n break<\/span>;<\/span>
                                \n case<\/span> 'age'<\/span>:<\/span>
                                \n if<\/span> (<\/span>!<\/span>trimmedValue)<\/span> {<\/span>
                                \n error =<\/span> '\u5e74\u9f84\u4e0d\u80fd\u4e3a\u7a7a'<\/span>;<\/span>
                                \n }<\/span> else<\/span> if<\/span> (<\/span>isNaN<\/span>(<\/span>Number<\/span>(<\/span>trimmedValue)<\/span>)<\/span> ||<\/span> Number<\/span>(<\/span>trimmedValue)<\/span> <<\/span> 0<\/span>)<\/span> {<\/span>
                                \n error =<\/span> '\u5e74\u9f84\u5fc5\u987b\u662f\u6b63\u6570'<\/span>;<\/span>
                                \n }<\/span>
                                \n break<\/span>;<\/span>
                                \n }<\/span><\/p>\n

                                dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'setError'<\/span>,<\/span> field,<\/span> error }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> handleChange =<\/span> useCallback<\/span>(<\/span>(<\/span>field<\/span>:<\/span> string,<\/span> value<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'setValue'<\/span>,<\/span> field,<\/span> value }<\/span>)<\/span>;<\/span>
                                \n \/\/ \u5b9e\u65f6\u9a8c\u8bc1，\u8f93\u5165\u65f6\u6e05\u9664\u9519\u8bef<\/span>
                                \n if<\/span> (<\/span>value &&<\/span> value.<\/span>trim<\/span>(<\/span>)<\/span> !==<\/span> ''<\/span>)<\/span> {<\/span>
                                \n validateField<\/span>(<\/span>field,<\/span> value)<\/span>;<\/span>
                                \n }<\/span>
                                \n }<\/span>,<\/span> [<\/span>validateField]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> handleBlur =<\/span> useCallback<\/span>(<\/span>(<\/span>field<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'setTouched'<\/span>,<\/span> field,<\/span> touched<\/span>:<\/span> true<\/span> }<\/span>)<\/span>;<\/span>
                                \n \/\/ \u4f7f\u7528\u5f53\u524d\u8f93\u5165\u7684\u503c\u8fdb\u884c\u9a8c\u8bc1<\/span>
                                \n const<\/span> currentValue =<\/span> state.<\/span>values[<\/span>field]<\/span> ||<\/span> ''<\/span>;<\/span>
                                \n validateField<\/span>(<\/span>field,<\/span> currentValue)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>state.<\/span>values,<\/span> validateField]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> validate =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n const<\/span> newErrors<\/span>:<\/span> Record<<\/span>string,<\/span> string><\/span> =<\/span> {<\/span>}<\/span>;<\/span><\/p>\n

                                Object.<\/span>keys<\/span>(<\/span>state.<\/span>values)<\/span>.<\/span>forEach<\/span>(<\/span>field<\/span> =><\/span> {<\/span>
                                \n validateField<\/span>(<\/span>field,<\/span> state.<\/span>values[<\/span>field]<\/span>)<\/span>;<\/span>
                                \n }<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> isValid =<\/span> Object.<\/span>keys<\/span>(<\/span>newErrors)<\/span>.<\/span>length ===<\/span> 0<\/span>;<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>)<\/span>;<\/span><\/p>\n

                                return<\/span> isValid;<\/span>
                                \n }<\/span>,<\/span> [<\/span>state.<\/span>values,<\/span> validateField]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> handleSubmit =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n if<\/span> (<\/span>validate<\/span>(<\/span>)<\/span>)<\/span> {<\/span>
                                \n console.<\/span>log<\/span>(<\/span>'\u63d0\u4ea4\u8868\u5355:'<\/span>,<\/span> state.<\/span>values)<\/span>;<\/span>
                                \n alert<\/span>(<\/span>'\u63d0\u4ea4\u6210\u529f！'<\/span>)<\/span>;<\/span>
                                \n }<\/span>
                                \n }<\/span>,<\/span> [<\/span>state.<\/span>values,<\/span> validate]<\/span>)<\/span>;<\/span><\/p>\n

                                const<\/span> handleReset =<\/span> useCallback<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                \n dispatch<\/span>(<\/span>{<\/span> type<\/span>:<\/span> 'reset'<\/span> }<\/span>)<\/span>;<\/span>
                                \n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                                return<\/span> (<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>card}<\/span>><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardHeader}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>cardTitle}<\/span>><\/span>useReducer \u793a\u4f8b：\u8868\u5355\u9a8c\u8bc1<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>cardBody}<\/span>><\/span>
                                \n <<\/span>TextInput
                                \n style=<\/span>{<\/span>[<\/span>styles.<\/span>input,<\/span> state.<\/span>errors.<\/span>username ?<\/span> styles.<\/span>inputError :<\/span> null<\/span>]<\/span>}<\/span>
                                \n placeholder=<\/span>"\u7528\u6237\u540d"<\/span>
                                \n value=<\/span>{<\/span>state.<\/span>values.<\/span>username ||<\/span> ''<\/span>}<\/span>
                                \n onChangeText=<\/span>{<\/span>(<\/span>text<\/span>)<\/span> =><\/span> handleChange<\/span>(<\/span>'username'<\/span>,<\/span> text)<\/span>}<\/span>
                                \n onBlur=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> handleBlur<\/span>(<\/span>'username'<\/span>)<\/span>}<\/span>
                                \n \/<\/span>><\/span>
                                \n {<\/span>state.<\/span>errors.<\/span>username &&<\/span> <<\/span>Text style=<\/span>{<\/span>styles.<\/span>errorText}<\/span>><\/span>{<\/span>state.<\/span>errors.<\/span>username}<\/span><<\/span>\/<\/span>Text><\/span>}<\/span><\/p>\n

                                <<\/span>TextInput
                                \n style=<\/span>{<\/span>[<\/span>styles.<\/span>input,<\/span> state.<\/span>errors.<\/span>email ?<\/span> styles.<\/span>inputError :<\/span> null<\/span>]<\/span>}<\/span>
                                \n placeholder=<\/span>"\u90ae\u7bb1"<\/span>
                                \n value=<\/span>{<\/span>state.<\/span>values.<\/span>email ||<\/span> ''<\/span>}<\/span>
                                \n onChangeText=<\/span>{<\/span>(<\/span>text<\/span>)<\/span> =><\/span> handleChange<\/span>(<\/span>'email'<\/span>,<\/span> text)<\/span>}<\/span>
                                \n onBlur=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> handleBlur<\/span>(<\/span>'email'<\/span>)<\/span>}<\/span>
                                \n \/<\/span>><\/span>
                                \n {<\/span>state.<\/span>errors.<\/span>email &&<\/span> <<\/span>Text style=<\/span>{<\/span>styles.<\/span>errorText}<\/span>><\/span>{<\/span>state.<\/span>errors.<\/span>email}<\/span><<\/span>\/<\/span>Text><\/span>}<\/span><\/p>\n

                                <<\/span>TextInput
                                \n style=<\/span>{<\/span>[<\/span>styles.<\/span>input,<\/span> state.<\/span>errors.<\/span>age ?<\/span> styles.<\/span>inputError :<\/span> null<\/span>]<\/span>}<\/span>
                                \n placeholder=<\/span>"\u5e74\u9f84"<\/span>
                                \n value=<\/span>{<\/span>state.<\/span>values.<\/span>age ||<\/span> ''<\/span>}<\/span>
                                \n onChangeText=<\/span>{<\/span>(<\/span>text<\/span>)<\/span> =><\/span> handleChange<\/span>(<\/span>'age'<\/span>,<\/span> text)<\/span>}<\/span>
                                \n onBlur=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> handleBlur<\/span>(<\/span>'age'<\/span>)<\/span>}<\/span>
                                \n keyboardType=<\/span>"numeric"<\/span>
                                \n \/<\/span>><\/span>
                                \n {<\/span>state.<\/span>errors.<\/span>age &&<\/span> <<\/span>Text style=<\/span>{<\/span>styles.<\/span>errorText}<\/span>><\/span>{<\/span>state.<\/span>errors.<\/span>age}<\/span><<\/span>\/<\/span>Text><\/span>}<\/span><\/p>\n

                                <<\/span>View style=<\/span>{<\/span>styles.<\/span>buttonRow}<\/span>><\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>[<\/span>styles.<\/span>button,<\/span> styles.<\/span>resetButton]<\/span>}<\/span>
                                \n onPress=<\/span>{<\/span>handleReset}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>\u91cd\u7f6e<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>TouchableOpacity
                                \n style=<\/span>{<\/span>styles.<\/span>button}<\/span>
                                \n onPress=<\/span>{<\/span>handleSubmit}<\/span>
                                \n ><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>buttonText}<\/span>><\/span>\u63d0\u4ea4<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>TouchableOpacity><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                \/\/ \u4e3b\u754c\u9762<\/span>
                                \nconst<\/span> UseContextUseReducerScreen<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n return<\/span> (<\/span>
                                \n <<\/span>AppProvider><\/span>
                                \n <<\/span>SafeAreaView style=<\/span>{<\/span>styles.<\/span>container}<\/span>><\/span>
                                \n {<\/span>\/* \u6807\u9898\u533a\u57df *\/<\/span>}<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>header}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>pageTitle}<\/span>><\/span>React Native for<\/span> Harmony<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>subtitle}<\/span>><\/span>useContext \u548c useReducer<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span><\/p>\n

                                {<\/span>\/* \u5185\u5bb9\u533a\u57df *\/<\/span>}<\/span>
                                \n <<\/span>ScrollView style=<\/span>{<\/span>styles.<\/span>content}<\/span>><\/span>
                                \n <<\/span>ThemeExample \/<\/span>><\/span>
                                \n <<\/span>AuthExample \/<\/span>><\/span>
                                \n <<\/span>CounterExample \/<\/span>><\/span>
                                \n <<\/span>FormExample \/<\/span>><\/span><\/p>\n

                                {<\/span>\/* \u8bf4\u660e\u533a\u57df *\/<\/span>}<\/span>
                                \n <<\/span>View style=<\/span>{<\/span>styles.<\/span>infoCard}<\/span>><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoTitle}<\/span>><\/span>💡 \u6838\u5fc3\u6982\u5ff5<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 useContext:<\/span> \u8bfb\u53d6 Context \u503c，\u5b9e\u73b0\u8de8\u7ec4\u4ef6\u72b6\u6001\u5171\u4eab<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 useReducer:<\/span> \u7ba1\u7406\u590d\u6742\u72b6\u6001\u903b\u8f91，\u66ff\u4ee3 useState<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 Context:<\/span> \u521b\u5efa Context \u5bf9\u8c61，\u63d0\u4f9b\u5168\u5c40\u72b6\u6001<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 Provider:<\/span> \u63d0\u4f9b Context \u503c，\u5305\u88f9\u5e94\u7528\u7ec4\u4ef6\u6811<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 Reducer:<\/span> \u96c6\u4e2d\u7ba1\u7406\u72b6\u6001\u66f4\u65b0\u903b\u8f91<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 Dispatch:<\/span> \u89e6\u53d1\u72b6\u6001\u66f4\u65b0，\u57fa\u4e8e action \u7c7b\u578b<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 \u81ea\u5b9a\u4e49 Hook:<\/span> \u5c01\u88c5 Context \u548c useReducer \u903b\u8f91<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>Text style=<\/span>{<\/span>styles.<\/span>infoText}<\/span>><\/span>\u2022 \u9e3f\u8499\u7aef\u5b8c\u7f8e\u517c\u5bb9，\u6027\u80fd\u4f18\u79c0<<\/span>\/<\/span>Text><\/span>
                                \n <<\/span>\/<\/span>View><\/span>
                                \n <<\/span>\/<\/span>ScrollView><\/span>
                                \n <<\/span>\/<\/span>SafeAreaView><\/span>
                                \n <<\/span>\/<\/span>AppProvider><\/span>
                                \n )<\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                const<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                \n return<\/span> <<\/span>UseContextUseReducerScreen \/<\/span>><\/span>;<\/span>
                                \n}<\/span>;<\/span><\/p>\n

                                const<\/span> styles =<\/span> StyleSheet.<\/span>create<\/span>(<\/span>{<\/span>
                                \n container<\/span>:<\/span> {<\/span>
                                \n flex<\/span>:<\/span> 1<\/span>,<\/span>
                                \n backgroundColor<\/span>:<\/span> '#F5F7FA'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u6807\u9898\u533a\u57df ========<\/span>
                                \n header<\/span>:<\/span> {<\/span>
                                \n padding<\/span>:<\/span> 20<\/span>,<\/span>
                                \n backgroundColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n borderBottomWidth<\/span>:<\/span> 1<\/span>,<\/span>
                                \n borderBottomColor<\/span>:<\/span> '#EBEEF5'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n pageTitle<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 24<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '700'<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n textAlign<\/span>:<\/span> 'center'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 8<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n subtitle<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 16<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '500'<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#909399'<\/span>,<\/span>
                                \n textAlign<\/span>:<\/span> 'center'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u5185\u5bb9\u533a\u57df ========<\/span>
                                \n content<\/span>:<\/span> {<\/span>
                                \n flex<\/span>:<\/span> 1<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u5361\u7247\u6837\u5f0f ========<\/span>
                                \n card<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 12<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 16<\/span>,<\/span>
                                \n shadowColor<\/span>:<\/span> '#000000'<\/span>,<\/span>
                                \n shadowOffset<\/span>:<\/span> {<\/span> width<\/span>:<\/span> 0<\/span>,<\/span> height<\/span>:<\/span> 2<\/span> }<\/span>,<\/span>
                                \n shadowOpacity<\/span>:<\/span> 0.08<\/span>,<\/span>
                                \n shadowRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n elevation<\/span>:<\/span> 4<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n cardHeader<\/span>:<\/span> {<\/span>
                                \n padding<\/span>:<\/span> 16<\/span>,<\/span>
                                \n borderBottomWidth<\/span>:<\/span> 1<\/span>,<\/span>
                                \n borderBottomColor<\/span>:<\/span> '#EBEEF5'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n cardTitle<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 18<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '600'<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n cardBody<\/span>:<\/span> {<\/span>
                                \n padding<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u4e3b\u9898\u6837\u5f0f ========<\/span>
                                \n themePreview<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 20<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 16<\/span>,<\/span>
                                \n alignItems<\/span>:<\/span> 'center'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n darkThemePreview<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#1a1a1a'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n themeText<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 16<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 8<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n darkThemeText<\/span>:<\/span> {<\/span>
                                \n color<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u8ba4\u8bc1\u4fe1\u606f\u6837\u5f0f ========<\/span>
                                \n authInfo<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#E6F7FF'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 16<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n authLabel<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 12<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#909399'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 4<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n authValue<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 4<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u8ba1\u6570\u5668\u6837\u5f0f ========<\/span>
                                \n countText<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 64<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '700'<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#409EFF'<\/span>,<\/span>
                                \n textAlign<\/span>:<\/span> 'center'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n historyContainer<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#F5F7FA'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 12<\/span>,<\/span>
                                \n marginTop<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n historyLabel<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 12<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#909399'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 4<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n historyValue<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 12<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#606266'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u8f93\u5165\u6846\u6837\u5f0f ========<\/span>
                                \n input<\/span>:<\/span> {<\/span>
                                \n borderWidth<\/span>:<\/span> 1<\/span>,<\/span>
                                \n borderColor<\/span>:<\/span> '#DCDFE6'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 12<\/span>,<\/span>
                                \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 8<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n inputError<\/span>:<\/span> {<\/span>
                                \n borderColor<\/span>:<\/span> '#F56C6C'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u6309\u94ae\u6837\u5f0f ========<\/span>
                                \n buttonRow<\/span>:<\/span> {<\/span>
                                \n flexDirection<\/span>:<\/span> 'row'<\/span>,<\/span>
                                \n justifyContent<\/span>:<\/span> 'center'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 16<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n button<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#409EFF'<\/span>,<\/span>
                                \n paddingHorizontal<\/span>:<\/span> 24<\/span>,<\/span>
                                \n paddingVertical<\/span>:<\/span> 12<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n marginHorizontal<\/span>:<\/span> 8<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n resetButton<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#F56C6C'<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n buttonText<\/span>:<\/span> {<\/span>
                                \n color<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '500'<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u9519\u8bef\u6587\u672c ========<\/span>
                                \n errorText<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 12<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#F56C6C'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 8<\/span>,<\/span>
                                \n }<\/span>,<\/span><\/p>\n

                                \/\/ ======== \u4fe1\u606f\u5361\u7247 ========<\/span>
                                \n infoCard<\/span>:<\/span> {<\/span>
                                \n backgroundColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
                                \n borderRadius<\/span>:<\/span> 12<\/span>,<\/span>
                                \n padding<\/span>:<\/span> 16<\/span>,<\/span>
                                \n margin<\/span>:<\/span> 16<\/span>,<\/span>
                                \n marginTop<\/span>:<\/span> 0<\/span>,<\/span>
                                \n shadowColor<\/span>:<\/span> '#000000'<\/span>,<\/span>
                                \n shadowOffset<\/span>:<\/span> {<\/span> width<\/span>:<\/span> 0<\/span>,<\/span> height<\/span>:<\/span> 2<\/span> }<\/span>,<\/span>
                                \n shadowOpacity<\/span>:<\/span> 0.08<\/span>,<\/span>
                                \n shadowRadius<\/span>:<\/span> 8<\/span>,<\/span>
                                \n elevation<\/span>:<\/span> 4<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n infoTitle<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 16<\/span>,<\/span>
                                \n fontWeight<\/span>:<\/span> '600'<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#303133'<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 12<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n infoText<\/span>:<\/span> {<\/span>
                                \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
                                \n color<\/span>:<\/span> '#606266'<\/span>,<\/span>
                                \n lineHeight<\/span>:<\/span> 22<\/span>,<\/span>
                                \n marginBottom<\/span>:<\/span> 6<\/span>,<\/span>
                                \n }<\/span>,<\/span>
                                \n}<\/span>)<\/span>;<\/span><\/p>\n

                                export<\/span> default<\/span> App;<\/span><\/p>\n

                                \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

                                \u6b22\u8fce\u52a0\u5165\u5f00\u6e90\u9e3f\u8499\u8de8\u5e73\u53f0\u793e\u533a：https:\/\/openharmonycrossplatform.csdn.net<\/p>\n","protected":false},"excerpt":{"rendered":"

                                React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1：useContext \u548c useReducer \u4ee3\u7801\u6307\u5357
                                \n\u4e00\u3001\u6838\u5fc3\u77e5\u8bc6\u70b9：useContext \u548c useReducer \u5b8c\u6574\u6838\u5fc3\u7528\u6cd5
                                \n1. \u7528\u5230\u7684\u7eaf\u5185\u7f6e\u7ec4\u4ef6\u4e0e API
                                \n\u6240\u6709\u80fd\u529b\u5747\u4e3a RN \u539f\u751f\u81ea\u5e26，\u5168\u90e8\u4ece react \u6838\u5fc3\u5305\u76f4\u63a5\u5bfc\u5165，\u65e0\u4efb\u4f55\u989d\u5916\u4f9d\u8d56\u3001\u65e0\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93，\u9e3f\u8499\u7aef\u65e0\u4efb\u4f55\u517c\u5bb9\u95ee\u9898，\u4e5f\u662f\u5b9e\u73b0 useContext \u548c useReducer \u7684\u5168\u90e8<\/p>\n","protected":false},"author":2,"featured_media":64347,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,280,524],"topic":[],"class_list":["post-64348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-native","tag-harmonyos","tag-react-js"],"yoast_head":"\nReact Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/64348.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1：useContext \u548c useReducer \u4ee3\u7801\u6307\u5357 \u4e00\u3001\u6838\u5fc3\u77e5\u8bc6\u70b9：useContext \u548c useReducer \u5b8c\u6574\u6838\u5fc3\u7528\u6cd5 1. \u7528\u5230\u7684\u7eaf\u5185\u7f6e\u7ec4\u4ef6\u4e0e API \u6240\u6709\u80fd\u529b\u5747\u4e3a RN \u539f\u751f\u81ea\u5e26，\u5168\u90e8\u4ece react \u6838\u5fc3\u5305\u76f4\u63a5\u5bfc\u5165，\u65e0\u4efb\u4f55\u989d\u5916\u4f9d\u8d56\u3001\u65e0\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93，\u9e3f\u8499\u7aef\u65e0\u4efb\u4f55\u517c\u5bb9\u95ee\u9898，\u4e5f\u662f\u5b9e\u73b0 useContext \u548c useReducer \u7684\u5168\u90e8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/64348.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-23T03:48:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260123034830-6972ef8e39b4e.gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/64348.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/64348.html\",\"name\":\"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-23T03:48:31+00:00\",\"dateModified\":\"2026-01-23T03:48:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/64348.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/64348.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/64348.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/64348.html","og_locale":"zh_CN","og_type":"article","og_title":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1：useContext \u548c useReducer \u4ee3\u7801\u6307\u5357 \u4e00\u3001\u6838\u5fc3\u77e5\u8bc6\u70b9：useContext \u548c useReducer \u5b8c\u6574\u6838\u5fc3\u7528\u6cd5 1. \u7528\u5230\u7684\u7eaf\u5185\u7f6e\u7ec4\u4ef6\u4e0e API \u6240\u6709\u80fd\u529b\u5747\u4e3a RN \u539f\u751f\u81ea\u5e26，\u5168\u90e8\u4ece react \u6838\u5fc3\u5305\u76f4\u63a5\u5bfc\u5165，\u65e0\u4efb\u4f55\u989d\u5916\u4f9d\u8d56\u3001\u65e0\u4efb\u4f55\u7b2c\u4e09\u65b9\u5e93，\u9e3f\u8499\u7aef\u65e0\u4efb\u4f55\u517c\u5bb9\u95ee\u9898，\u4e5f\u662f\u5b9e\u73b0 useContext \u548c useReducer \u7684\u5168\u90e8","og_url":"https:\/\/www.wsisp.com\/helps\/64348.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-23T03:48:31+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260123034830-6972ef8e39b4e.gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"13 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/64348.html","url":"https:\/\/www.wsisp.com\/helps\/64348.html","name":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-23T03:48:31+00:00","dateModified":"2026-01-23T03:48:31+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/64348.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/64348.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/64348.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"React Native \u9e3f\u8499\u8de8\u5e73\u53f0\u5f00\u53d1\uff1auseContext \u548c useReducer"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/64348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=64348"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/64348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/64347"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=64348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=64348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=64348"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=64348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}