React-Routerルーティングジャンプ時にrenderが2回トリガする場合.
1309 ワード
質問:React-Routerルーティングがジャンプすると、renderが2回トリガーされ、ページが繰り返しレンダリングされます.
理由:プロジェクトで使用するreact-router^3.x.x.react-routerルーティングジャンプ時、this.props.location.Actionの値には2つの状態があります.どちらのステータスもrenderをトリガーします.したがって、ページは2回レンダリングされます.
1、Linkをクリックすると、this.props.location.Action=PUSH,2,ブラウザが前進後退するとthis.props.location.action=POP.
だからリンクをクリックした時、状態はまずPUSHで、その後ブラウザは前進後退して、状態はPOPになります.
解決策:ルーティングレイヤで、reactサイクル関数shouldComponentUpdate(ライフサイクルに詳しくない学生は別途資料を調べてください)を使用してthisを行います.props.location.Actionは判断に値する.項目の実際必要に応じて値がPUSHかPOPかを判断します.
私が選んだのはPOPです.プロジェクトにはwindowを使う必要があるからです.location.hash='xxxxxx',この場合PUSHはトリガできないため,ルーティングジャンプは失敗する.
備考:フェイスブック公式にはreact-routerのBUGで、すでに^4.x.xで修復されました.
以上の内容はすべて本人が実际のプロジェクト开発の中で出会った所得で、すべての人が出会ったBUGは异なって、大神に軽く喷き出してもらいます.ありがとう!
転載先:https://www.cnblogs.com/ygjoe/p/7193540.html
理由:プロジェクトで使用するreact-router^3.x.x.react-routerルーティングジャンプ時、this.props.location.Actionの値には2つの状態があります.どちらのステータスもrenderをトリガーします.したがって、ページは2回レンダリングされます.
1、Linkをクリックすると、this.props.location.Action=PUSH,2,ブラウザが前進後退するとthis.props.location.action=POP.
だからリンクをクリックした時、状態はまずPUSHで、その後ブラウザは前進後退して、状態はPOPになります.
解決策:ルーティングレイヤで、reactサイクル関数shouldComponentUpdate(ライフサイクルに詳しくない学生は別途資料を調べてください)を使用してthisを行います.props.location.Actionは判断に値する.項目の実際必要に応じて値がPUSHかPOPかを判断します.
私が選んだのはPOPです.プロジェクトにはwindowを使う必要があるからです.location.hash='xxxxxx',この場合PUSHはトリガできないため,ルーティングジャンプは失敗する.
1 shouldComponentUpdate() {
2 // POP ， PUSH Link
3 return this.props.location.action === "POP"
4 }備考:フェイスブック公式にはreact-routerのBUGで、すでに^4.x.xで修復されました.
以上の内容はすべて本人が実际のプロジェクト开発の中で出会った所得で、すべての人が出会ったBUGは异なって、大神に軽く喷き出してもらいます.ありがとう!
転載先:https://www.cnblogs.com/ygjoe/p/7193540.html