♻️ ☢️ 💇🏻 ReactはDOM標準に違反していますか？ 🍡 ➰ 🐬

かなり人気のあるサイトhttps://custom-elements-everywhere.comがあり、さまざまなフレームワークでWebコンポーネントがどのように機能するかを示しています。ほとんどすべてのフレームワークで100％の美しい結果が得られますが、Reactでは71％という非常に憂慮すべき結果が得られます。

多くのユーザーがこのページを見て、ReactはWebコンポーネントだけでなく、一般的なDOMAPIも十分にサポートしていないと結論付けています。そうですか？本当に悪いですか？

それを理解しましょう！

テストの分析

評価はテストに基づいて計算されます。ここに結果が表示されます。全部で15のテストがあり、そのうちの7つが壊れているので、私たちはそのような重要でない評価を得ます。次のテストは壊れています：

属性とプロパティ
- 配列データをプロパティとして渡します
- オブジェクトデータをプロパティとして渡します
イベント
- カスタム要素によってディスパッチされた小文字のDOMイベントを宣言的にリッスンできます
- カスタム要素によってディスパッチされたケバブケースのDOMイベントを宣言的にリッスンできます
- カスタム要素によってディスパッチされたcamelCaseDOMイベントを宣言的にリッスンできます
- カスタム要素によってディスパッチされたCAPScaseDOMイベントを宣言的にリッスンできます
- カスタム要素によってディスパッチされたPascalCaseDOMイベントを宣言的にリッスンできます

, , . . 71% , 90% 15% , - .

, - , . - Github:

- React.
.

" " ? .

<input type="checkbox" checked={checked} onChange={handleChange} />

. - :

<custom-checkbox checked={checked} onChange={handleChange} />

, on*

React . ( ) . , Sebastian Markbåge ( React) . :

, . , touch- , , , , "" , .. , .

, , . , , , . , . DOM-, _ _ , . DOM- (refs) .

, React DOM-, , React ( Concurrent mode), Refs API:

function CustomCheckbox({ checked, handleChange }) {
	const ref = useRef();

	useEffect(() => {
		ref.current.addEventListener("change", handleChange);
		return () => ref.current.removeEventListener("change", handleChange);
  }, [handleChange]);
  
	return <custom-checkbox ref={ref} />;
}

, custom-elements-everywhere? , . , , / .

?

" -" . , - JSX . , ( JSON.stringify) :

<user-view user="{user}" />
<!--  <user-view user="[object Object]" /> -->

. React DOM - . DOM- , . React- :

function UserView({ user }) {
	const ref = useRef();
	//      user
	useEffect(() => (ref.current.user = user), [user]);

	return <user-view ref={ref} />;
}

, , , JSX , :

/** @jsx h */
import { createElement } from "react";
import val from "@skatejs/val";

const h = val(createElement);

function Checkbox({ checked, handleChange }) {
	// !
	return <custom-checkbox checked={checked} onChange={handleChange} />;
}

, , , Google Developer Advocates , , . , React DOM ( ).

100%

100% . ? !. ( new CustomEvent('!')

)?

. , Angular . materials-components-web : MDCSlider:change

. Google (Angular) (Material design). , – DOM-.

, , - React 71% , Angular 100%. .

, . . , DOM – . , custom-elements-everywhere .

c custom-elements-everywhere, React DOM API -. , :

onChange React DOM- change. , [Github issue](https://github.com/facebook/react/issues/9657). React, React - , , onChange React – .
onFocus/onBlur . DOM API, focus, , . React , focusin. issue.
. , , . Portal API React-. DOM-, .

, . , , , React , () - DOM API , React (, react-focus-lock).

- . label. for id :

<label for="name"> </label>
<input id="name" name="firstName" />

. React :

const id = useUniqueId();

<Label for={id}> </Label>
<Input id={id} name="firstName" />

Label Input html- .

React, -:

<custom-label for="name"> </custom-label>
<custom-input id="name" name="firstName" />

テキストボックスが壊れています！内部ラベルタグは、異なるShadowDOMインスタンス上にあるため、入力タグと通信できませんでした。この問題を解決するために設計された提案がありますが、それはまだ初期段階であり、どのブラウザーでも機能しません（Webコンポーネントはほぼ10年間開発されていることを忘れないでください）。また、現時点では、アクセシビリティ要件を遵守して、Webコンポーネントの形式で実装custom-label

するcustom-input

ことはできません。

したがって、どのテクノロジーがWeb標準の実際の違反であるかを自分で考えてください。

ReactはDOM標準に違反していますか？

テストの分析

?

100%

More articles: