Reactration Reactrationに特定のコンポーネントのチェックサムを無視させる方法を教えてください。

Question

rehydratingすると、最初にレンダリングされたマークアップがサーバマークアップと正確に一致しない場合、Reactは文句を言うでしょう。正確にはです。しかし、特定のコンポーネントがクライアント側とサーバ側で同じ結果を得られないことはまれではありません。明らかに、このようなコンポーネントは常に間違ったチェックサムについての警告が表示されます別の値にそれがレンダリングされますたびに示し、そのように反応する

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

：ほとんど自明、現在の時刻を表示するコンポーネントを検討します。

特定のコンポーネントについて、クライアントがサーバーとは異なるレンダリングを行っても問題がないことをReactに伝えるにはどうすればよいですか？ V16 the documentationに反応するので、自分の質問に答えるために

Answer 1

はそれについて、これを言う：

あなたが意図的にサーバーとクライアント上の別の何かを描画する必要がある場合は、2パスレンダリングを行うことができます。クライアント上で異なるものをレンダリングするコンポーネントは、this.state.isClientのような状態変数を読み取ることができます。これは、componentDidMount（）でtrueに設定できます。このようにして、最初のレンダーパスではサーバーと同じコンテンツがレンダリングされ、不一致は回避されますが、ハイドレーション後に追加のパスが同期して行われます。このアプローチでは、コンポーネントを2回レンダリングする必要があるため、コンポーネントの速度が低下するため、注意して使用してください。