imperative DOMと動的importと組わせた場合の注意点
imperative DOMとは？
JSが直接DOMを操作する書き方
imperative: 命令的
例) 「この要素を探して」「ここにHTMLを入れて」「イベントを付ける」
Reactのdeclarative(宣言的)と反対の考え方(差分状態 → UI が自動的に決まる)
管理が煩雑になるなどデメリットが多い
Reactからバニラjsへの移行段階では使わざるを得ない
Partial DOM Update(部分的なDOM更新 / 部分更新)とも呼ばれる？
動的importと組み合わせた場合の注意点
imperative DOM x 動的importでは挿入対象のDOMの存在チェックが必須
Reactのレンダリングタイミングとjsでの描画タイミングがズレることがある
jsでのHTMLの挿入対象の要素の存在チェックで早期リターンでエラー回避する
例) Reactで描画したDOMに動的importでHTMLを追加描画する
code: (js)
// NG
useEffect(() => {
const init = async () => {
const target = document.querySelector('data-grant-filter') // 挿入対象要素(Reactで描画したDOM)
const GrantFilter = (await import('../grant-filter')).default
const grantFilter = new GrantFilter()
grantFilter.render(target) // target が null の可能性がある
}
init()
}, [])
// OK（DOM存在チェックをしている）
useEffect(() => {
const init = async () => {
const target = document.querySelector('data-grant-filter')
if (!target) return // 挿入対象要素の有無をチェック
const GrantFilter = (await import('../grant-filter')).default
const grantFilter = new GrantFilter()
grantFilter.render(target)
}
init()
}, [])
#React
#JavaScript