インラインスタイルの使用

reaction jsxでインラインスタイルを使用する場合があります.

...
return <div style={{marginTop: '10px'}}>hello!</div>

このようなインラインスタイルを使用すると、リアクターで再レンダリングできるという.
その前に、反応の基本的な動作を説明しましょう.

はんのう行為

素子内の状態が変化した場合、反応器は、dirtyとしてマークされ、batchに添加される.
仮想ドメインエイリアスを実際のブラウザに登録されているDOMエイリアスと比較/巡回し、汚れたチェックのエイリアスを処理します.
処理中に属性値のみが変更された場合は、属性値のみが更新され、領域のタグまたは構成部品が変更された場合は、ノードとそのサブノードのすべてのノードがアンインストール(削除)され、新しいvirtualDomで置き換えられます.
このように自分の仮想ドームツリーを巡回し、変更を更新することが反応器のコアアルゴリズムです.

なぜ内線スタイルが再レンダリングされるのでしょうか?

インラインスタイルオブジェクトを値として使用します.
JavaScriptでは、同じ属性のオブジェクトを===演算子と比較します.
出力false.

{} === {} // output false 

これは,オブジェクトがすべて参照値であるため,参照アドレスが異なると考える.
問題はここから始まる.
前述したように、素子内の状態が変化した場合.
バキュールドームを描画し、変更を更新するために相互に巡回します.
returnゲートのすべてのコードはbuchual domです.
ここで、新しく変更した構成部品は、内部で[ライン内スタイル](Line Style)オブジェクトに戻り、[バッファドーム](Bufferドーム)で変更した値として認識され、再レンダリングされます.

どうやって解決するの?

返信を使用する場合は、行内スタイルは使用しないでください.
面倒でもcssを単独で書くことができ、
styleオブジェクト自体はuserMemoを用いてメモリ分解を行うことが望ましい.

コメントサイト

https://velog.io/@naamoonoo/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%A0%EA%B9%8C-Diffing-3%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0