Wie lässt sich die Rehydration von Reactionen ignorieren Checksummen bestimmter Komponenten?

Question

Beim Rehydratisieren wird React sich beschweren, wenn das anfänglich gerenderte Markup nicht mit dem Server Markup exakt übereinstimmt. Es ist jedoch nicht völlig ungewöhnlich, dass bestimmte Komponenten nicht auf der Client- und der Serverseite identische Ergebnisse liefern. Die meisten trivialer, sollten Sie eine Komponente, die die aktuelle Zeit anzeigt:

function Now() { 
    return <span>{ new Date().toString() }</span>; 
} 

Offensichtlich eine solche Komponente einen anderen Wert jedes Mal, zeigen würde es gemacht, und als solche Reaktion wird immer über falsche Prüfsummen warnen.

Wie kann ich React sagen, dass es in Ordnung ist, wenn der Client etwas anderes als den Server für bestimmte Komponenten rendert?

Answer 1

Um meine eigene Frage zu beantworten, da the documentation Reagieren v16 sagt über sie:

Wenn Sie absichtlich etwas anderes auf dem Server und dem Client zu machen, dann können Sie eine Zwei-Pass-Rendering tun. Komponenten, die auf dem Client etwas anderes darstellen, können eine Statusvariable wie this.state.isClient lesen, die Sie in componentDidMount() auf true festlegen können. Auf diese Weise wird der anfängliche Render-Durchlauf den gleichen Inhalt wie der Server wiedergeben, wodurch Fehlübereinstimmungen vermieden werden, aber ein zusätzlicher Durchlauf erfolgt synchron unmittelbar nach der Hydration. Beachten Sie, dass dieser Ansatz Ihre Komponenten verlangsamt, da sie doppelt gerendert werden müssen. Verwenden Sie diese daher mit Vorsicht.