Also habe ich vor einer Woche angefangen, React zu lernen, und bin unweigerlich auf das Problem des Zustands und der Art und Weise gekommen, wie Komponenten mit dem Rest der App kommunizieren sollen. Ich habe mich umgesehen und Redux scheint der Geschmack des Monats zu sein. Ich habe die gesamte Dokumentation durchgelesen und denke, dass dies eine ziemlich revolutionäre Idee ist. Hier sind meine Gedanken dazu:
Der Staat ist im Allgemeinen ziemlich böse und eine große Quelle von Fehlern in der Programmierung. Anstatt alles in Ihrer App zu verteilen, sagt Redux, warum nicht einfach alles in einem globalen Statusbaum konzentriert haben, für den Sie Aktionen ausgeben müssen, um Änderungen vorzunehmen. Klingt interessant. Alle Programme benötigen einen Status. Lassen Sie uns ihn also in einem unreinen Bereich speichern und nur von dort aus ändern, damit Fehler leicht aufgespürt werden können. Dann können wir auch einzelne Statuselemente deklarativ an React-Komponenten binden und sie automatisch neu zeichnen lassen, und alles ist schön.
Ich habe jedoch zwei Fragen zu diesem gesamten Design. Zum einen, warum muss der Staatsbaum unveränderlich sein? Angenommen, mir ist das Debuggen von Zeitreisen und das Hot-Reload egal und ich habe bereits das Rückgängigmachen / Wiederherstellen in meiner App implementiert. Es scheint einfach so umständlich, dies tun zu müssen:
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];An Stelle von:
case COMPLETE_TODO:
state[action.index].completed = true;Ganz zu schweigen davon, dass ich ein Online-Whiteboard erstelle, um zu lernen, und jede Statusänderung kann so einfach sein wie das Hinzufügen eines Pinselstrichs zur Befehlsliste. Nach einer Weile (Hunderte von Pinselstrichen) kann das Duplizieren dieses gesamten Arrays extrem teuer und zeitaufwändig werden.
Ich bin mit einem globalen Statusbaum einverstanden, der unabhängig von der Benutzeroberfläche ist, die über Aktionen mutiert ist. Muss er jedoch wirklich unveränderlich sein? Was ist falsch an einer einfachen Implementierung wie dieser (sehr grober Entwurf. In 1 Minute geschrieben)?
var store = { items: [] };
export function getState() {
return store;
}
export function addTodo(text) {
store.items.push({ "text": text, "completed", false});
}
export function completeTodo(index) {
store.items[index].completed = true;
}Es ist immer noch ein globaler Zustandsbaum, der durch ausgegebene Aktionen mutiert, aber äußerst einfach und effizient ist.
quelle
immutablejsund verwenden Siereturn state.setIn([action.index, 'completed'], true);, um Boilerplate zu reduzieren.return state.map(i => i.index == action.index ? {...i, completed: true} : i);Antworten:
Natürlich ist es das. Das Gleiche gilt jedoch für jede Datenbank, die Sie jemals verwendet haben. Es ist besser, Redux als In-Memory-Datenbank zu behandeln, von der Ihre Komponenten reaktiv abhängen können.
Die Unveränderlichkeit ermöglicht die Überprüfung, ob ein Teilbaum sehr effizient geändert wurde, da dies bis zu einer Identitätsprüfung vereinfacht wird.
Ja, Ihre Implementierung ist effizient, aber der gesamte virtuelle Dom muss jedes Mal neu gerendert werden, wenn der Baum irgendwie manipuliert wird.
Wenn Sie React verwenden, führt dies möglicherweise zu einem Unterschied zum tatsächlichen Dom und führt nur minimale stapeloptimierte Manipulationen durch, aber das vollständige Top-Down-Re-Rendering ist immer noch ineffizient.
Bei einem unveränderlichen Baum müssen zustandslose Komponenten nur prüfen, ob die Teilbäume, von denen sie abhängen, sich in ihren Identitäten von den vorherigen Werten unterscheiden, und wenn ja, kann das Rendern vollständig vermieden werden.
quelle