谈谈React5种非常流行的状态管理库

原文:sourl.cn/F95CrZ,代码仓库地址: https://github.com/dabit3/react-state-5-ways

公司主营业务：成都做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出永清免费做网站回馈大家。

在 React 中，似乎有无数种处理状态管理的方法。想要了解各种库，去比较它们之间的如何选择以及它们如何原作都是一件令人头疼的事情。

当我学习一些新东西时，喜欢去比较那些实现相同功能的库，这有助于我理解各种库之间的差别，并且能够形成一个自己在构建应用的时候如何选择使用它们的思维模型。

在本文中，我将一一介绍如何在 React App 中使用 5 种最流行的库/APIS(使用最现代和最新版本的库)如何在 React App程序中使用全局状态管理，并且达到一样的效果。

  1. Recoil[1]
  2. MobX[2]
  3. XState[3]
  4. Redux (with hooks)[4]
  5. Context[5]

我还将试着解释它们之间的差异，本文以 概述 - 代码 - 结论的方式讲解。

为了演示 APIS，我们将使用这些库来做一个如何创建和展示笔记的应用。

入门

如果你准备好了，那么请先创建一个新的 React App，我们将使用它来开始我们的实践：

 
 
 
 
    
  
  
  
  
  1. npx create-react-app react-state-examples 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. cd react-state-examples 
    4.

无论何时何地，使用 start 命令启动你的命令。

 
 
 
 
    
  
  
  
  
  1. npm start 
    2.

Recoil

Recoil Docs[6]

代码行数:30

我最喜欢 Recoil 的点是因为它基于 Hooks 的 API 以及它的直观性。

与其他一些库相比，我想说 Recoil 的和 API 比大多数库更容易。

Recoil 实践

开始使用Recoil前，先安装依赖：

 
 
 
 
    
  
  
  
  
  1. npm install recoil 
    2.

接下来，将 RecoilRoot 添加到 App 程序的根/入口点：

 
 
 
 
    
  
  
  
  
  1. import App from './App' 
    2. 
  
  
  
  
  2. import { RecoilRoot } from 'recoil' 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. export default function Main() { 
    5. 
  
  
  
  
  5.   return ( 
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.        
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.   ); 
    10. 
  
  
  
  
  10. } 
    11.

下一步，要创建一些状态，我们将使用来自Recoil 的 atom 并设置key和一些初始状态：

 
 
 
 
    
  
  
  
  
  1. import { atom } from 'recoil' 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const notesState = atom({ 
    4. 
  
  
  
  
  4.   key: 'notesState', // unique ID (with respect to other atoms/selectors) 
    5. 
  
  
  
  
  5.   default: [], // default value (aka initial state) 
    6. 
  
  
  
  
  6. }); 
    7.

现在，你可以在你app的任何位置使用来自 Recoil 的useRecoilState。这是使用 Recoil 实现的笔记 App：

 
 
 
 
    
  
  
  
  
  1. import React, { useState } from 'react'; 
    2. 
  
  
  
  
  2. import { RecoilRoot, atom, useRecoilState } from 'recoil'; 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. const notesState = atom({ 
    5. 
  
  
  
  
  5.   key: 'notesState', // unique ID (with respect to other atoms/selectors) 
    6. 
  
  
  
  
  6.   default: [], // default value (aka initial state) 
    7. 
  
  
  
  
  7. }); 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. export default function Main() { 
    10. 
  
  
  
  
  10.   return ( 
    11. 
  
  
  
  
  11.      
    12. 
  
  
  
  
  12.        
    13. 
  
  
  
  
  13.      
    14. 
  
  
  
  
  14.   ); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17. function App() { 
    18. 
  
  
  
  
  18.   const [notes, setNotes] = useRecoilState(notesState); 
    19. 
  
  
  
  
  19.   const [input, setInput] = useState('') 
    20. 
  
  
  
  
  20.   function createNote() { 
    21. 
  
  
  
  
  21.     const notesArray = [...notes, input] 
    22. 
  
  
  
  
  22.     setNotes(notesArray) 
    23. 
  
  
  
  
  23.     setInput('') 
    24. 
  
  
  
  
  24.   } 
    25. 
  
  
  
  
  25.   return ( 
    26. 
  
  
  
  
  26.     
     
    27. 
  
  
  
  
  27.       
    My notes app
     
    28. 
  
  
  
  
  28.       Create Note 
    29. 
  
  
  
  
  29.        setInput(e.target.value)} /> 
    30. 
  
  
  
  
  30.       { notes.map(note => Note: {note}
    ) } 
    31. 
  
  
  
  
  31.     
 
  •   ); 
  • } 

    • Recoil selectors

    来自文档

    selectors 用于计算基于 state 的派生属性。这能让我们避免冗余 state，通常无需使用 reducers 来保持状态同步和有效。相反，最小状态集存储在 atoms 中。

    使用 Recoil selectors，你可以根据 state 计算派生属性，例如，可能是已过滤的待办事项数组(在todo app 中)或已发货的订单数组(在电子商务应用程序中)：

     
 
 
 
      
  
  
  
  
    1. import { selector, useRecoilValue } from 'recoil' 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. const completedTodosState = selector({ 
      4. 
  
  
  
  
    4.   key: 'todosState', 
      5. 
  
  
  
  
    5.   get: ({get}) => { 
      6. 
  
  
  
  
    6.     const todos = get(todosState) 
      7. 
  
  
  
  
    7.     return todos.filter(todo => todo.completed) 
      8. 
  
  
  
  
    8.   } 
      9. 
  
  
  
  
    9. }) 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. const completedTodos = useRecoilValue(completedTodosState) 
      12.

    结论

    recoil 文档说："Recoil 是一个用于 React 状态管理的实验性使用工具集。" 当我决定在生产环境中使用库时，听到"实验性"可能会非常担心，所以至少在此刻，我不确定我现在对使用 Recoil 的感觉如何 。

    Recoil 很棒，我会为我的下一个 app 使用上它，但是担心实验性属性，因此我将密切关注它，但现在不将它用于生产中。

    Mobx

    MobX React Lite Docs[7]

    代码行数: 30

    因为我在使用 Redux 之后使用了MobX React， 所以它一直是我最喜欢的管理 React 状态库之一。多年来，两者之间的明显差异，但是对我而言我不会改变我的选择。

    MobX React 现在有一个轻量级版本(MobX React Lite)，这个版本专门针对函数组件而诞生，它的有点是速度更快，更小。

    MobX 具有可观察者和观察者的概念，然而可观察的API有所改变，那就是不必指定希望被观察的每个项，而是可以使用 makeAutoObservable 来为你处理所有事情。

    如果你希望数据是响应的并且需要修改 store ，则可以用observer来包装组件。

    MobX 实践

    开始使用Mobx前，先安装依赖：

     
 
 
 
      
  
  
  
  
    1. npm install mobx mobx-react-lite 
      2.

    该应用的状态已在 Store 中创建和管理。

    我们应用的 store 如下所示：

     
 
 
 
      
  
  
  
  
    1. import { makeAutoObservable } from 'mobx' 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. class NoteStore { 
      4. 
  
  
  
  
    4.   notes = [] 
      5. 
  
  
  
  
    5.   createNote(note) { 
      6. 
  
  
  
  
    6.     this.notes = [...this.notes, note] 
      7. 
  
  
  
  
    7.   } 
      8. 
  
  
  
  
    8.   constructor() { 
      9. 
  
  
  
  
    9.     /* makes all data in store observable, replaces @observable */ 
      10. 
  
  
  
  
    10.     makeAutoObservable(this) 
      11. 
  
  
  
  
    11.   } 
      12. 
  
  
  
  
    12. } 
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14. const Notes = new NoteStore() 
      15.

    然后，我们可以导入notes，并在 app 中的任何位置使用它们。要使组件是可观察修改，需要将其包装在observer中：

     
 
 
 
      
  
  
  
  
    1. import { observer } from 'mobx-react-lite' 
      2. 
  
  
  
  
    2. import { notes } from './NoteStore' 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. const App = observer(() => 
      {notes[0]|| "No notes"}
      ) 
      5.

    让我们看看它们如何一起运行的：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2. 
  
  
  
  
    2. import { observer } from "mobx-react-lite" 
      3. 
  
  
  
  
    3. import { makeAutoObservable } from 'mobx' 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. class NoteStore { 
      6. 
  
  
  
  
    6.   notes = [] 
      7. 
  
  
  
  
    7.   createNote(note) { 
      8. 
  
  
  
  
    8.     this.notes = [...this.notes, note] 
      9. 
  
  
  
  
    9.   } 
      10. 
  
  
  
  
    10.   constructor() { 
      11. 
  
  
  
  
    11.     makeAutoObservable(this) 
      12. 
  
  
  
  
    12.   } 
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. const Notes = new NoteStore() 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. const App = observer(() => { 
      18. 
  
  
  
  
    18.   const [input, setInput] = useState('') 
      19. 
  
  
  
  
    19.   const { notes } = Notes 
      20. 
  
  
  
  
    20.   function onCreateNote() { 
      21. 
  
  
  
  
    21.     Notes.createNote(input) 
      22. 
  
  
  
  
    22.     setInput('') 
      23. 
  
  
  
  
    23.   } 
      24. 
  
  
  
  
    24.   return ( 
      25. 
  
  
  
  
    25.     
       
      26. 
  
  
  
  
    26.       
      My notes app
       
      27. 
  
  
  
  
    27.       Create Note 
      28. 
  
  
  
  
    28.        setInput(e.target.value)} /> 
      29. 
  
  
  
  
    29.       { notes.map(note => Note: {note}
      ) } 
      30. 
  
  
  
  
    30.     
     
  •   ) 
  • }) 
  •  
  • export default App 

    • 总结

    MobX 已经诞生了一段时间，它很好用。与许多其他公司一样，我在企业公司的大量线上应用中使用了它。

    最近再次使用它之后的感受是，与其他一些库相比，我觉得文档略有不足。我会自己再尝试一下，然后再做决定。

    XState

    XState Docs[8]

    代码行数:44

    XState 试图解决现代UI复杂性的问题，并且依赖于有限状态机[9]的思想和实现。

    XState 是由 David Khourshid[10], 创建的，自发布以来，我就看到过很多关于它的讨论，所以我一直在观望。这是在写本文之前唯一不熟悉的库。

    在使用之后，我可以肯定地说它的实现方式是与其他库截然不同的。它的复杂性比其他任何一种都要高，但是关于状态如何工作的思维模型确实很 cool 而且对于提高能力很有帮助，在用它构建一些 demo app 之后，让我感到它很精妙。

    要了解有关 XState 试图解决的问题的更多信息，请查看David Khourshid的这段视频[11]或我也发现有趣的帖子[12]。

    XState 在这里的使用不是特别好，因为它更适合在更复杂的状态下使用，但是这个简短的介绍至少可以希望为你提供一个选择，以帮助你全面了解其工作原理。

    XState实践

    要开始使用XState，请安装这些库：

     
 
 
 
      
  
  
  
  
    1. npm install xstate @xstate/react 
      2.

    要创建machine，请使用xstate中的Machine实用程序。这是我们将用于 Notes app 的machine：

     
 
 
 
      
  
  
  
  
    1. import { Machine } from 'xstate' 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. const notesMachine = Machine({ 
      4. 
  
  
  
  
    4.   id: 'notes', 
      5. 
  
  
  
  
    5.   initial: 'ready', 
      6. 
  
  
  
  
    6.   context: { 
      7. 
  
  
  
  
    7.     notes: [], 
      8. 
  
  
  
  
    8.     note: '' 
      9. 
  
  
  
  
    9.   }, 
      10. 
  
  
  
  
    10.   states: { 
      11. 
  
  
  
  
    11.     ready: {}, 
      12. 
  
  
  
  
    12.   }, 
      13. 
  
  
  
  
    13.   on: { 
      14. 
  
  
  
  
    14.     "CHANGE": { 
      15. 
  
  
  
  
    15.       actions: [ 
      16. 
  
  
  
  
    16.         assign({ 
      17. 
  
  
  
  
    17.           note: (_, event) => event.value 
      18. 
  
  
  
  
    18.         }) 
      19. 
  
  
  
  
    19.       ] 
      20. 
  
  
  
  
    20.     }, 
      21. 
  
  
  
  
    21.     "CREATE_NOTE": { 
      22. 
  
  
  
  
    22.       actions: [ 
      23. 
  
  
  
  
    23.         assign({ 
      24. 
  
  
  
  
    24.           note: "", 
      25. 
  
  
  
  
    25.           notes: context => [...context.notes, context.note] 
      26. 
  
  
  
  
    26.         }) 
      27. 
  
  
  
  
    27.       ] 
      28. 
  
  
  
  
    28.     } 
      29. 
  
  
  
  
    29.   } 
      30. 
  
  
  
  
    30. }) 
      31.

    我们将使用的数据存储在 context 中。在这里，我们有一个 notes 列表 和一个 input 输入框。有两种操作，一种用于创建 note(CREATE_NOTE)，另一种用于设置 input(CHANGE)。

    整个示例：

     
 
 
 
      
  
  
  
  
    1. import React from 'react' 
      2. 
  
  
  
  
    2. import { useService } from '@xstate/react' 
      3. 
  
  
  
  
    3. import { Machine, assign, interpret } from 'xstate' 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. const notesMachine = Machine({ 
      6. 
  
  
  
  
    6.   id: 'notes', 
      7. 
  
  
  
  
    7.   initial: 'ready', 
      8. 
  
  
  
  
    8.   context: { 
      9. 
  
  
  
  
    9.     notes: [], 
      10. 
  
  
  
  
    10.     note: '' 
      11. 
  
  
  
  
    11.   }, 
      12. 
  
  
  
  
    12.   states: { 
      13. 
  
  
  
  
    13.     ready: {}, 
      14. 
  
  
  
  
    14.   }, 
      15. 
  
  
  
  
    15.   on: { 
      16. 
  
  
  
  
    16.     "CHANGE": { 
      17. 
  
  
  
  
    17.       actions: [ 
      18. 
  
  
  
  
    18.         assign({ 
      19. 
  
  
  
  
    19.           note: (_, event) => event.value 
      20. 
  
  
  
  
    20.         }) 
      21. 
  
  
  
  
    21.       ] 
      22. 
  
  
  
  
    22.     }, 
      23. 
  
  
  
  
    23.     "CREATE_NOTE": { 
      24. 
  
  
  
  
    24.       actions: [ 
      25. 
  
  
  
  
    25.         assign({ 
      26. 
  
  
  
  
    26.           note: "", 
      27. 
  
  
  
  
    27.           notes: context => [...context.notes, context.note] 
      28. 
  
  
  
  
    28.         }) 
      29. 
  
  
  
  
    29.       ] 
      30. 
  
  
  
  
    30.     } 
      31. 
  
  
  
  
    31.   } 
      32. 
  
  
  
  
    32. }) 
      33. 
  
  
  
  
    33.  
      34. 
  
  
  
  
    34. const service = interpret(notesMachine).start() 
      35. 
  
  
  
  
    35.  
      36. 
  
  
  
  
    36. export default function App() { 
      37. 
  
  
  
  
    37.   const [state, send] = useService(service) 
      38. 
  
  
  
  
    38.   const { context: { note, notes} } = state 
      39. 
  
  
  
  
    39.  
      40. 
  
  
  
  
    40.   return ( 
      41. 
  
  
  
  
    41.     
       
      42. 
  
  
  
  
    42.       
      My notes app
       
      43. 
  
  
  
  
    43.        send({ type: 'CREATE_NOTE' })}>Create Note 
      44. 
  
  
  
  
    44.        send({ type: 'CHANGE', value: e.target.value})} /> 
      45. 
  
  
  
  
    45.       { notes.map(note => Note: {note}
      ) } 
      46. 
  
  
  
  
    46.     
     
  •   ) 
  • } 

    • 要在应用中修改状态，我们使用 xstate-react 中的 useService hooks。

    总结

    XState 就像劳斯莱斯 或者说 状态管理的瑞士军刀。可以做很多事情，但是所有功能都带来额外的复杂性。

    我希望将来能更好地学习和理解它，这样我就可以将它应用到 AWS 的相关问题和参考它的架构，但是对于小型项目，我认为这可能它太过庞大。

    Redux

    React Redux docs[13]

    代码行数:33

    Redux 是整个 React 生态系统中最早，最成功的状态管理库之一。我已经在许多项目中使用过Redux，如今它依然很强大。

    新的 Redux Hooks API 使 redux 使用起来不再那么麻烦，而且使用起来也更容易。

    Redux Toolkit 还改进了 Redux，并大大降低了学习曲线。

    Redux 实践

    开始使用Redux前，先安装依赖：

     
 
 
 
      
  
  
  
  
    1. npm install @reduxjs-toolkit react-redux 
      2.

    要使用 Redux，您需要创建和配置以下内容：

    A store

    Reducers

    A provider

    为了帮助解释所有这些工作原理，我在实现 Redux 中的 Notes app 的代码中做了注释：

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from 'react' 
      2. 
  
  
  
  
    2. import { Provider, useDispatch, useSelector } from 'react-redux' 
      3. 
  
  
  
  
    3. import { configureStore, createReducer, combineReducers } from '@reduxjs/toolkit' 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. function App() {   
      6. 
  
  
  
  
    6.   const [input, setInput] = useState('') 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.   /* useSelector 允许你检索你想使用的状态，在我们的例子中是notes数组。 */ 
      9. 
  
  
  
  
    9.   const notes = useSelector(state => state.notes) 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.   /* dispatch 允许我们向 store 发送更新信息 */ 
      12. 
  
  
  
  
    12.   const dispatch = useDispatch() 
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14.   function onCreateNote() { 
      15. 
  
  
  
  
    15.     dispatch({ type: 'CREATE_NOTE', note: input }) 
      16. 
  
  
  
  
    16.     setInput('') 
      17. 
  
  
  
  
    17.   } 
      18. 
  
  
  
  
    18.   return ( 
      19. 
  
  
  
  
    19.     
       
      20. 
  
  
  
  
    20.       
      My notes app
       
      21. 
  
  
  
  
    21.       Create Note 
      22. 
  
  
  
  
    22.        setInput(e.target.value)} /> 
      23. 
  
  
  
  
    23.       { notes.map(note => Note: {note}
      ) } 
      24. 
  
  
  
  
    24.      
      25. 
  
  
  
  
    25.   ); 
      26. 
  
  
  
  
    26. } 
      27. 
  
  
  
  
    27.  
      28. 
  
  
  
  
    28. /* 在这里，我们创建了一个 reducer，它将在`CREATE_NOTE`动作被触发时更新note数组。 */ 
      29. 
  
  
  
  
    29. const notesReducer = createReducer([], { 
      30. 
  
  
  
  
    30.   'CREATE_NOTE': (state, action) => [...state, action.note] 
      31. 
  
  
  
  
    31. }) 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33. /* Here we create the store using the reducers in the app */ 
      34. 
  
  
  
  
    34. const reducers = combineReducers({ notes: notesReducer }) 
      35. 
  
  
  
  
    35. const store = configureStore({ reducer: reducers }) 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37. function Main() { 
      38. 
  
  
  
  
    38.   return ( 
      39. 
  
  
  
  
    39.     /* 在这里，我们使用app中的reducer来创建store。 */ 
      40. 
  
  
  
  
    40.      
      41. 
  
  
  
  
    41.        
      42. 
  
  
  
  
    42.      
      43. 
  
  
  
  
    43.   ) 
      44. 
  
  
  
  
    44. } 
      45. 
  
  
  
  
    45.  
      46. 
  
  
  
  
    46. export default Main 
      47.

    总结

    如果你正在寻找一个具有庞大社区、大量文档以及大量问答的库，那么Redux是一个非常靠谱的选择。因为它已诞生了很长时间，你只要在 Google 搜索，或多或少都能找到一些相关的答案。

    在使用异步操作(例如数据获取)时，通常需要添加其他中间件，这会增加它的成本和复杂性。

    对我来说，Redux 起初很难学习。一旦我熟悉了框架，就可以很容易地使用和理解它。过去，对于新开发人员而言，有时会感到不知所措，但是随着 Redux Hooks 和 Redux Toolkit 的改进，学习过程变得容易得多，我仍然强烈建议 Redux 作为前置的选择。

    Context

    Context docs[14]

    代码行数: 31

    context 的优点在于，不需要安装和依赖其他库，它是 React 的一部分。

    使用 context 非常简单，当你尝试管理大量不同的 context 值时，问题通常会出现在一些大或者复杂的应用程序中，因此你通常必须构建自己的抽象来自己管理这些情况。

    Context 实践

    要创建和使用 context ，请直接从React导入钩子。下面是它的工作原理：

     
 
 
 
      
  
  
  
  
    1. /* 1. Import the context hooks */ 
      2. 
  
  
  
  
    2. import React, { useState, createContext, useContext } from 'react'; 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. /* 2. Create a piece of context */ 
      5. 
  
  
  
  
    5. const NotesContext = createContext(); 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. /* 3. Set the context using a provider */ 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.    
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12. /* 4. Use the context */ 
      13. 
  
  
  
  
    13. const { notes } = useContext(NotesContext); 
      14.

    全部代码

     
 
 
 
      
  
  
  
  
    1. import React, { useState, createContext, useContext } from 'react'; 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. const NotesContext = createContext(); 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. export default function Main() { 
      6. 
  
  
  
  
    6.   const [notes, setNotes] = useState([]) 
      7. 
  
  
  
  
    7.   function createNote(note) { 
      8. 
  
  
  
  
    8.     const notesArray = [...notes, note] 
      9. 
  
  
  
  
    9.     setNotes(notesArray) 
      10. 
  
  
  
  
    10.   } 
      11. 
  
  
  
  
    11.   return ( 
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.        
      14. 
  
  
  
  
    14.      
      15. 
  
  
  
  
    15.   ); 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. function App() { 
      19. 
  
  
  
  
    19.   const { notes, createNote } = useContext(NotesContext); 
      20. 
  
  
  
  
    20.   const [input, setInput] = useState('') 
      21. 
  
  
  
  
    21.   function onCreateNote() { 
      22. 
  
  
  
  
    22.     createNote(input) 
      23. 
  
  
  
  
    23.     setInput('') 
      24. 
  
  
  
  
    24.   } 
      25. 
  
  
  
  
    25.  
      26. 
  
  
  
  
    26.   return ( 
      27. 
  
  
  
  
    27.     
       
      28. 
  
  
  
  
    28.       
      My notes app
       
      29. 
  
  
  
  
    29.       Create Note 
      30. 
  
  
  
  
    30.        setInput(e.target.value)} /> 
      31. 
  
  
  
  
    31.       { notes.map(note => Note: {note}
      ) } 
      32. 
  
  
  
  
    32.      
      33. 
  
  
  
  
    33.   ); 
      34. 
  
  
  
  
    34. } 
      35.

    总结

    context 是一种管理 app 状态的真正可靠且直接的方法。它的API可能不如其他一些库那么好，但是如果你了解如何使用它，并且可以在你的 app 中使用它创建正确的数据抽象，那么选择 context 来管理你的全局状态就不会错。

    参考资料

    [1]Recoil: https://dev.to/dabit3/react-state-6-ways-2bem?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email#recoil

    [2]MobX: https://dev.to/dabit3/react-state-6-ways-2bem?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email#mobx

    [3]XState: https://dev.to/dabit3/react-state-6-ways-2bem?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email#xstate

    [4]Redux (with hooks): https://dev.to/dabit3/react-state-6-ways-2bem?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email#redux

    [5]Context: https://dev.to/dabit3/react-state-6-ways-2bem?utm_source=digest_mailer&utm_medium=email&utm_campaign=digest_email#context

    [6]Recoil Docs: https://recoiljs.org/

    [7]MobX React Lite Docs: https://github.com/mobxjs/mobx-react-lite

    [8]XState Docs: https://xstate.js.org/docs/packages/xstate-react/

    [9]有限状态机: https://en.wikipedia.org/wiki/Finite-state_machine

    [10]David Khourshid: https://twitter.com/DavidKPiano

    [11]这段视频: https://www.youtube.com/watch?v=RqTxtOXcv8Y

    [12]帖子: https://dev.to/hectorleiva/how-writing-state-machines-made-me-feel-like-a-programmer-2ndc

    [13]React Redux docs: https://react-redux.js.org/

    [14]Context docs: https://reactjs.org/docs/hooks-reference.html#usecontext

    本文转载自微信公众号「 秋风的笔记」，可以通过以下二维码关注。转载本文请联系 秋风的笔记公众号。

    文章标题：谈谈React5种非常流行的状态管理库
    转载来源：http://www.hantingmc.com/qtweb/news12/408662.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    云服务器知识

    分类信息网站

    温江做网站　　 　成都木托盘　　 　西部信息中心　　 　绵阳电信服务器托管　　 　重庆网站制作　　 　成都电信光华数据中心　　 　网站优化排名　　 　成都广告招牌　　 　广安迈傲建站　　 　营销型网站建设　　 　微信小程序开发　　 　网站解决方案　　 　电商网站建设方案　　 　微商城开发　　 　宜宾网站设计　　 　成都小程序开发　　 　四川鸿达　　 　四川服务器托管　　 　四川艺考培训　　 　网络推广公司