npx create-react-app react-state-examples 
  
  
  
  
 
  
  
  
  
cd react-state-examples 
 
 
 
 

 
 
 
 

  
  
  
  
npm start 
 
 
 
 

 
 
 
 

  
  
  
  
npm install recoil 
 
 
 
 

 
 
 
 

  
  
  
  
import App from './App' 
  
  
  
  
import { RecoilRoot } from 'recoil' 
  
  
  
  
 
  
  
  
  
export default function Main() { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
 
 
 
 

 
 
 
 

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

 
 
 
 

  
  
  
  
import React, { useState } from 'react'; 
  
  
  
  
import { RecoilRoot, atom, useRecoilState } from 'recoil'; 
  
  
  
  
 
  
  
  
  
const notesState = atom({ 
  
  
  
  
  key: 'notesState', // unique ID (with respect to other atoms/selectors) 
  
  
  
  
  default: [], // default value (aka initial state) 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
export default function Main() { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function App() { 
  
  
  
  
  const [notes, setNotes] = useRecoilState(notesState); 
  
  
  
  
  const [input, setInput] = useState('') 
  
  
  
  
  function createNote() { 
  
  
  
  
    const notesArray = [...notes, input] 
  
  
  
  
    setNotes(notesArray) 
  
  
  
  
    setInput('') 
  
  
  
  
  } 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
My notes app
 
  
  
  
  
      Create Note 
  
  
  
  
       setInput(e.target.value)} /> 
  
  
  
  
      { notes.map(note => Note: {note}
) } 
  
  
  
  
    

 
 
 
 

  
  
  
  
import { selector, useRecoilValue } from 'recoil' 
  
  
  
  
 
  
  
  
  
const completedTodosState = selector({ 
  
  
  
  
  key: 'todosState', 
  
  
  
  
  get: ({get}) => { 
  
  
  
  
    const todos = get(todosState) 
  
  
  
  
    return todos.filter(todo => todo.completed) 
  
  
  
  
  } 
  
  
  
  
}) 
  
  
  
  
 
  
  
  
  
const completedTodos = useRecoilValue(completedTodosState) 
 
 
 
 

 
 
 
 

  
  
  
  
npm install mobx mobx-react-lite 
 
 
 
 

 
 
 
 

  
  
  
  
import { makeAutoObservable } from 'mobx' 
  
  
  
  
 
  
  
  
  
class NoteStore { 
  
  
  
  
  notes = [] 
  
  
  
  
  createNote(note) { 
  
  
  
  
    this.notes = [...this.notes, note] 
  
  
  
  
  } 
  
  
  
  
  constructor() { 
  
  
  
  
    /* makes all data in store observable, replaces @observable */ 
  
  
  
  
    makeAutoObservable(this) 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const Notes = new NoteStore() 
 
 
 
 

 
 
 
 

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

 
 
 
 

  
  
  
  
import React, { useState } from 'react' 
  
  
  
  
import { observer } from "mobx-react-lite" 
  
  
  
  
import { makeAutoObservable } from 'mobx' 
  
  
  
  
 
  
  
  
  
class NoteStore { 
  
  
  
  
  notes = [] 
  
  
  
  
  createNote(note) { 
  
  
  
  
    this.notes = [...this.notes, note] 
  
  
  
  
  } 
  
  
  
  
  constructor() { 
  
  
  
  
    makeAutoObservable(this) 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const Notes = new NoteStore() 
  
  
  
  
 
  
  
  
  
const App = observer(() => { 
  
  
  
  
  const [input, setInput] = useState('') 
  
  
  
  
  const { notes } = Notes 
  
  
  
  
  function onCreateNote() { 
  
  
  
  
    Notes.createNote(input) 
  
  
  
  
    setInput('') 
  
  
  
  
  } 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
My notes app
 
  
  
  
  
      Create Note 
  
  
  
  
       setInput(e.target.value)} /> 
  
  
  
  
      { notes.map(note => Note: {note}
) } 
  
  
  
  
    

總結(jié)

MobX 已經(jīng)誕生了一段時(shí)間，它很好用。與許多其他公司一樣，我在企業(yè)公司的大量線上應(yīng)用中使用了它。

最近再次使用它之后的感受是，與其他一些庫(kù)相比，我覺得文檔略有不足。我會(huì)自己再嘗試一下，然后再做決定。

XState

XState Docs[8]

代碼行數(shù):44

XState 試圖解決現(xiàn)代UI復(fù)雜性的問(wèn)題，并且依賴于有限狀態(tài)機(jī)[9]的思想和實(shí)現(xiàn)。

XState 是由 David Khourshid[10], 創(chuàng)建的，自發(fā)布以來(lái)，我就看到過(guò)很多關(guān)于它的討論，所以我一直在觀望。這是在寫本文之前唯一不熟悉的庫(kù)。

在使用之后，我可以肯定地說(shuō)它的實(shí)現(xiàn)方式是與其他庫(kù)截然不同的。它的復(fù)雜性比其他任何一種都要高，但是關(guān)于狀態(tài)如何工作的思維模型確實(shí)很 cool 而且對(duì)于提高能力很有幫助，在用它構(gòu)建一些 demo app 之后，讓我感到它很精妙。

要了解有關(guān) XState 試圖解決的問(wèn)題的更多信息，請(qǐng)查看David Khourshid的這段視頻[11]或我也發(fā)現(xiàn)有趣的帖子[12]。

XState 在這里的使用不是特別好，因?yàn)樗m合在更復(fù)雜的狀態(tài)下使用，但是這個(gè)簡(jiǎn)短的介紹至少可以希望為你提供一個(gè)選擇，以幫助你全面了解其工作原理。

XState實(shí)踐

要開始使用XState，請(qǐng)安裝這些庫(kù)：

 
 
 
 

  
  
  
  
npm install xstate @xstate/react 
 
 
 
 

要?jiǎng)?chuàng)建machine，請(qǐng)使用xstate中的Machine實(shí)用程序。這是我們將用于 Notes app 的machine：

 
 
 
 

  
  
  
  
import { Machine } from 'xstate' 
  
  
  
  
 
  
  
  
  
const notesMachine = Machine({ 
  
  
  
  
  id: 'notes', 
  
  
  
  
  initial: 'ready', 
  
  
  
  
  context: { 
  
  
  
  
    notes: [], 
  
  
  
  
    note: '' 
  
  
  
  
  }, 
  
  
  
  
  states: { 
  
  
  
  
    ready: {}, 
  
  
  
  
  }, 
  
  
  
  
  on: { 
  
  
  
  
    "CHANGE": { 
  
  
  
  
      actions: [ 
  
  
  
  
        assign({ 
  
  
  
  
          note: (_, event) => event.value 
  
  
  
  
        }) 
  
  
  
  
      ] 
  
  
  
  
    }, 
  
  
  
  
    "CREATE_NOTE": { 
  
  
  
  
      actions: [ 
  
  
  
  
        assign({ 
  
  
  
  
          note: "", 
  
  
  
  
          notes: context => [...context.notes, context.note] 
  
  
  
  
        }) 
  
  
  
  
      ] 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}) 
 
 
 
 

我們將使用的數(shù)據(jù)存儲(chǔ)在 context 中。在這里，我們有一個(gè) notes 列表 和一個(gè) input 輸入框。有兩種操作，一種用于創(chuàng)建 note(CREATE_NOTE)，另一種用于設(shè)置 input(CHANGE)。

整個(gè)示例：

 
 
 
 

  
  
  
  
import React from 'react' 
  
  
  
  
import { useService } from '@xstate/react' 
  
  
  
  
import { Machine, assign, interpret } from 'xstate' 
  
  
  
  
 
  
  
  
  
const notesMachine = Machine({ 
  
  
  
  
  id: 'notes', 
  
  
  
  
  initial: 'ready', 
  
  
  
  
  context: { 
  
  
  
  
    notes: [], 
  
  
  
  
    note: '' 
  
  
  
  
  }, 
  
  
  
  
  states: { 
  
  
  
  
    ready: {}, 
  
  
  
  
  }, 
  
  
  
  
  on: { 
  
  
  
  
    "CHANGE": { 
  
  
  
  
      actions: [ 
  
  
  
  
        assign({ 
  
  
  
  
          note: (_, event) => event.value 
  
  
  
  
        }) 
  
  
  
  
      ] 
  
  
  
  
    }, 
  
  
  
  
    "CREATE_NOTE": { 
  
  
  
  
      actions: [ 
  
  
  
  
        assign({ 
  
  
  
  
          note: "", 
  
  
  
  
          notes: context => [...context.notes, context.note] 
  
  
  
  
        }) 
  
  
  
  
      ] 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}) 
  
  
  
  
 
  
  
  
  
const service = interpret(notesMachine).start() 
  
  
  
  
 
  
  
  
  
export default function App() { 
  
  
  
  
  const [state, send] = useService(service) 
  
  
  
  
  const { context: { note, notes} } = state 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
My notes app
 
  
  
  
  
       send({ type: 'CREATE_NOTE' })}>Create Note 
  
  
  
  
       send({ type: 'CHANGE', value: e.target.value})} /> 
  
  
  
  
      { notes.map(note => Note: {note}
) }