I understand that in React state should only contain data which may
change and cannot be computed from elsewhere,
Penso che non sia necessario memorizzare qualcosa che non può cambiare in una variabile (usare costanti per quello). E se qualcosa può essere calcolato da un'altra parte, puoi avvolgere il calcolo in una funzione e chiamarla quando ti serve. Quindi, questo non vale per lo stato del componente React, ma per una più ampia gamma di problemi.
however what about simple UI state that is not determined from any
particular data and does not need to persist long-term?
La mia opinione è che lo stato del componente React dovrebbe contenere tutto, che influisce sulla presentazione del componente in qualsiasi momento.
For example, I have a mobile menu which is collapsible on small
screens via CSS. The initial state of this menu is closed, and a
simple onClick handler is attached to the toggle button.
Il tuo onClick dovrebbe fare una delle seguenti azioni:
-
Long way : invia un messaggio tramite un'azione a un archivio dati sull'azione dell'utente. Datastore considererà la situazione (l'utente può fare clic sull'elemento o no, ad esempio) e invierà informazioni sullo stato in componenti (utilizzando l'azione o da trigger ing datastore (in Reflux ). Il componente modificherà il suo stato utilizzando le informazioni del datastore chiamando setState (e rerendering in seguito).
-
Modo breve : chiama setState direttamente dal tuo onClick handler.
In entrambi i casi, il state del componente dovrebbe includere sicuramente il campo collapsed (o qualsiasi altro campo, che influisce sul modo in cui il componente è sottoposto a rendering).
Un'altra considerazione importante: la filosofia React (il mio punto di vista) ignora le modifiche del DOM al di fuori delle chiamate render() . Ovviamente puoi usare jQuery da render () per modificare i componenti, ma ... questo potrebbe presto causare problemi se jQuery inizia a modificare qualcosa, che è stato appena renderizzato da React.
È sempre meglio non toccare il DOM reso da React al di fuori di render() .