data-reactid แอตทริบิวต์ใน html คืออะไร

ในขณะที่ฉันกำลังอ่าน HTML ของบางหน้าฉันสังเกตเห็นว่าบางหน้าใช้แอตทริบิวต์ "data-reactid" เช่น:

 <a data-reactid="......" ></a>

แอตทริบิวต์นั้นคืออะไรและมีหน้าที่อะไร?

data-reactidแอตทริบิวต์เป็นแอตทริบิวต์ที่กำหนดเองที่ใช้เพื่อให้ตอบสนองที่ไม่ซ้ำกันสามารถระบุส่วนประกอบภายใน DOM

นี่เป็นสิ่งสำคัญเนื่องจากแอปพลิเคชัน React สามารถแสดงผลได้ที่เซิร์ฟเวอร์เช่นเดียวกับไคลเอนต์ การตอบสนองภายในสร้างการแสดงการอ้างอิงถึงโหนด DOM ที่ประกอบขึ้นเป็นแอปพลิเคชันของคุณ (เวอร์ชันที่เรียบง่ายอยู่ด้านล่าง)

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

ไม่มีวิธีใดที่จะแบ่งปันการอ้างอิงวัตถุจริงระหว่างเซิร์ฟเวอร์และไคลเอนต์และการส่งโครงสร้างส่วนประกอบทั้งหมดในเวอร์ชันซีเรียลไลซ์อาจมีราคาแพง เมื่อแอปพลิเคชันถูกแสดงที่เซิร์ฟเวอร์และ React ถูกโหลดที่ไคลเอนต์ข้อมูลเดียวที่มีคือdata-reactidแอตทริบิวต์

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

จำเป็นต้องสามารถแปลงกลับเป็นโครงสร้างข้อมูลด้านบนได้ วิธีการนี้เป็นไปด้วยdata-reactidคุณลักษณะเฉพาะ นี้เรียกว่าพองต้นไม้องค์ประกอบ

คุณอาจสังเกตเห็นว่าหาก React แสดงผลที่ฝั่งไคลเอ็นต์จะใช้data-reactidแอตทริบิวต์แม้ว่าจะไม่จำเป็นต้องสูญเสียการอ้างอิงก็ตาม ในบางเบราว์เซอร์จะแทรกแอปพลิเคชันของคุณลงใน DOM โดยใช้.innerHTMLจากนั้นจะขยายโครงสร้างส่วนประกอบทันทีเพื่อเพิ่มประสิทธิภาพ

ความแตกต่างที่น่าสนใจอื่น ๆ คือรหัสการตอบสนองที่แสดงผลฝั่งไคลเอ็นต์จะมีรูปแบบจำนวนเต็มเพิ่มขึ้น (เช่น.0.1.4.3) ในขณะที่การแสดงผลเซิร์ฟเวอร์จะถูกนำหน้าด้วยสตริงแบบสุ่ม (เช่น.loqi70ccu80.1.4.3) เนื่องจากแอปพลิเคชันอาจแสดงผลในเซิร์ฟเวอร์หลายเครื่องและสิ่งสำคัญคือต้องไม่มีการชนกัน ที่ฝั่งไคลเอ็นต์มีกระบวนการแสดงผลเพียงกระบวนการเดียวซึ่งหมายความว่าสามารถใช้ตัวนับเพื่อให้แน่ใจว่ารหัสเฉพาะ

React 15ใช้document.createElementแทนดังนั้นมาร์กอัปที่แสดงผลไคลเอนต์จะไม่รวมแอตทริบิวต์เหล่านี้อีกต่อไป

เป็นแอตทริบิวต์ html ที่กำหนดเอง แต่ในกรณีนี้อาจถูกใช้โดยไลบรารี Facebook React JS

ดู: http://facebook.github.io/react/

แอตทริบิวต์ข้อมูลที่กำหนดเองใน HTML5

ต้องการอ้างความคิดเห็นของ Ian ในคำตอบของฉัน:

เป็นเพียงแอตทริบิวต์ (ที่ถูกต้อง) ในองค์ประกอบที่คุณสามารถใช้เพื่อจัดเก็บข้อมูล / ข้อมูลเกี่ยวกับมัน

จากนั้นรหัสนี้จะดึงข้อมูลในภายหลังในตัวจัดการเหตุการณ์และใช้เพื่อค้นหาองค์ประกอบเอาต์พุตเป้าหมาย มันจัดเก็บคลาสของ div อย่างมีประสิทธิภาพซึ่งควรส่งข้อความออกมา

reactidเป็นเพียงส่วนต่อท้ายคุณสามารถมีชื่อใดก็ได้ที่นี่เช่น: data-Ayman.

หากคุณต้องการที่จะพบความแตกต่างตรวจสอบไวโอลินในครั้งนี้คำตอบ SO และแสดงความคิดเห็น

แอตทริบิวต์ข้อมูลมักใช้สำหรับการโต้ตอบที่หลากหลาย โดยทั่วไปผ่านทางจาวาสคริปต์ ไม่ส่งผลกระทบใด ๆ เกี่ยวกับพฤติกรรมของไซต์และเป็นวิธีการที่สะดวกในการส่งผ่านข้อมูลเพื่อวัตถุประสงค์ใดก็ตามที่จำเป็น นี่คือบทความที่อาจช่วยให้เกิดความกระจ่าง:

http://ejohn.org/blog/html-5-data-attributes/

คุณสามารถสร้างแอตทริบิวต์ข้อมูลโดยนำหน้าdata-สตริงที่ปลอดภัยของแอตทริบิวต์มาตรฐานใดก็ได้ (ตัวเลขและตัวอักษรที่ไม่มีช่องว่างหรืออักขระพิเศษ) ตัวอย่างเช่นdata-idหรือในกรณีนี้data-reactid

นั่นคือแอตทริบิวต์ข้อมูล HTML ดูรายละเอียดเพิ่มเติมได้ที่http://html5doctor.com/html5-custom-data-attributes/

โดยทั่วไปจะเป็นเพียงที่เก็บข้อมูลที่กำหนดเองของคุณในขณะที่ยังทำให้ HTML ถูกต้อง มันเป็นdata-บวกระบุเฉพาะบางส่วน