React/Redux - Ist es sicher zu Massage vor dem Rendern

Question

Ich mache Tetris in React/Redux, mit Brandly's non-redux version für Referenz/Tipps und ziehen einige Dienstprogramme.

Sagen wir, ich habe einen Laden (Spielbrett), dargestellt durch ein 2d-Array. Die Werte sind entweder falsch oder der Name der Klasse des Stücks (zum Färben).

Zusätzlich gibt es einen zweiten Speicher, der das nächste Stück darstellt gespielt werden (und enthält das aktuelle Stück, das im Spiel ist, aber noch nicht festgelegt).

Innerhalb des Vorstandes Komponente verantwortlich für die Darstellung werden die Geschäfte auf Stützen angebracht, wie so:

const mapStateToProps = (state) => { 
    return { 
    Board: state.Board, 
    PieceList: state.PieceList 
    } 
} 

meine Render-Funktion wie folgt aussieht:

render() { 
    var piece = this.props.PieceList.currentPiece; 
    var newBoard = _.cloneDeep(this.props.Board); 
    pieceSetter(newBoard)(piece._piece.blocks[piece._rotation], piece._position, piece._piece.className); 
    return (
     <div className="board"> 
     {newBoard.map((x, i) => 
      <Row value={x} key={i}/> 
     )} 
     </div> 
    ) 
    } 

Wo pieceSetter eine Nutzenfunktion ist hinzuzufügen, Stücke zu einem Brett.

Ist es für die Rendermethode angemessen, Daten zu verarbeiten, um Informationen zu kombinieren? In diesem speziellen Fall wird das "aktuelle Stück" zur Anzeige auf der Tafel hinzugefügt.

Ich möchte vermeiden, das aktuelle Stück in den Speicher des Boards hinzuzufügen, weil die Bewegungsvalidierungsfunktionen derzeit gehandhabt werden (das Board ignoriert derzeit das "aktuelle" Stück für die Bewegungsvalidierung und berücksichtigt, wo das Stück sein wird keine Ahnung von „unplaced Stück“)

erschaffe ich Antipatterns, oder kann dies als angemessen angesehen werden?

Answer 1

Es wird empfohlen, diese Logik außerhalb der Renderfunktion zu platzieren. Man könnte diesen Code innerhalb von mapStateToProps, zum Beispiel platzieren, und schneiden Sie die render Funktion wird nur Präsentations.

Auch kopiert keine Notwendigkeit, das Board Objekt mit _.cloneDeep; Reagieren von Komponenten und Containern in der Rendering-Kette ändert den Status des Objekts in Ihrem Geschäft nicht.