私は最近 React プロジェクトを開発しており、React について学び始めました。開発プロセス中に遭遇した問題を記録するために、ここにいくつかのメモを取ります。これはあくまで個人的な理解のためです。
バグはこんな感じです。表示領域が2つあり(リストが2つ見える)、合成にはbizchartsを使用しています。下の図の左右が2つの表示領域で、最初の領域のデータが切り替わると、 2 番目の領域がちらつきます (再レンダリングされる可能性があります)
問題を特定する過程で、ページ上の list によって生成された 2 つのリストがあることがわかりました。トリガー イベントによって値の 1 つがリセットされると、onelist と twolist の両方が再度走査されました。
最初は、最初の UL の DOM ノードが再レンダリングされ、ブラウザがリフローして再描画されたためだと思い、2 番目の UL を記述したところ、ブレークポイントが入ったままであることがわかりました。
紆余曲折を経て、フック方式による問題は解消されました。
そこで、react の原理を理解し始め、なぜこれが起こったのかを大まかに理解しました。
Vue の更新原理についての私の理解は、Vue はオブジェクトを監視するということです。このオブジェクトはそれに依存するコンポーネントを収集し、vnode とデータをバインドできます。このオブジェクトの set メソッドが呼び出されると、依存関係が生じます。vnode は比較し、次に、依存関係を更新するように通知します。
React は一方向のデータ フローの設計に基づいています。コンポーネントの更新は親コンポーネントには影響せず、子コンポーネントにのみ影響します。そのため、React は setstate を呼び出すコンポーネントをルート ノードとして取得し、DOM ツリーを再生成し、走査して比較します。それ。
この時点で、トラバースされる問題については基本的に理解しましたが、別の問題があります。トラバースされているにもかかわらず、データは変更されていません。なぜ再レンダリングされるのでしょうか? そこでbizchartsに注目してbizchartsのコードをざっと見てみましたが、深くは理解していませんでしたが、もしかしたらこのサブコンポーネントが毎回中身が空かどうかを判断してdomを再生成しているのかもしれません。
最後に、react と vue が DOM を更新する仕組みを知り、問題は bizchart にあることがわかったので、深い調査はせずに思い切って echart に変更したところ、問題は解決しました。