Apakah React melanggar standar DOM?

Ada situs https://custom-elements-everywhere.com yang cukup populer yang menunjukkan bagaimana komponen web bekerja dalam kerangka kerja yang berbeda. Hampir semua kerangka kerja memiliki hasil 100% yang indah di sana, tetapi React memiliki 71% yang sangat mengkhawatirkan di sana:

Banyak pengguna melihat halaman ini dan menyimpulkan bahwa React tidak hanya mendukung komponen web dengan buruk, tetapi juga DOM API secara umum. Begitu? Apakah ini benar-benar buruk?

Mari kita cari tahu!

Menganalisis tes

Peringkat tersebut dihitung berdasarkan tes. Di sinilah hasilnya ditampilkan . Ada total 15 tes, 7 di antaranya rusak, oleh karena itu kami mendapatkan peringkat yang tidak penting. Tes berikut rusak:

• atribut dan properti

  
  
  
  
  

  • akan melewatkan data array sebagai properti

    
    
    
    
    

  • akan mengirimkan data objek sebagai properti

    
    
    
    
    

• acara

  
  
  
  
  

  • dapat secara deklaratif mendengarkan kejadian DOM huruf kecil yang dikirim oleh Elemen Khusus

    
    
    
    
    

  • bisa secara deklaratif mendengarkan kejadian DOM kasus kebab yang dikirim oleh Elemen Khusus

    
    
    
    
    

  • dapat secara deklaratif mendengarkan kejadian DOM camelCase yang dikirim oleh Elemen Khusus

    
    
    
    
    

  • dapat secara deklaratif mendengarkan peristiwa CAPScase DOM yang dikirim oleh Elemen Kustom

    
    
    
    
    

  • dapat secara deklaratif mendengarkan kejadian DOM PascalCase yang dikirim oleh Elemen Khusus

    
    
    
    
    

, , . . 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 -. , :

1. onChange React DOM- change. , [Github issue](https://github.com/facebook/react/issues/9657). React, React - , , onChange React – .

   
   
   
   
   

2. onFocus/onBlur . DOM API, focus, , . React , focusin. issue.

   
   
   
   
   

3. . , , . 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" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Kotak teks kita rusak! Tag label bagian dalam tidak dapat berkomunikasi dengan tag input karena berada pada instance ShadowDOM yang berbeda. Ada proposal yang dirancang untuk mengatasi masalah ini , tetapi masih dalam tahap awal dan tidak berfungsi di browser mana pun (ingat, komponen web telah dikembangkan selama hampir 10 tahun). Dan pada saat ini , hal itu tidak akan mungkin untuk menerapkan custom-label



itu custom-input



dalam bentuk komponen web, mengamati persyaratan aksesibilitas.

Jadi pikirkan sendiri teknologi mana yang benar-benar melanggar standar web.