Update: คำตอบนี้ดูเหมือนจะเป็นที่นิยมมากดังนั้นฉันใช้เวลาในการทำความสะอาดเล็กน้อยเพิ่มข้อมูลใหม่และชี้แจงบางสิ่งที่ฉันคิดว่าไม่ชัดเจนพอ โปรดแสดงความคิดเห็นหากคุณคิดว่ามีสิ่งอื่นที่ต้องการคำชี้แจงหรือการปรับปรุง
ความกังวลส่วนใหญ่ของคุณเป็นเรื่องของความเห็นและความชอบส่วนตัว แต่ฉันจะพยายามตอบอย่างเป็นกลางที่สุดเท่าที่จะทำได้:
ชนพื้นเมืองกับเรียบเรียง
เขียนจาวาสคริปต์ในวานิลลาจาวาเขียน CSS ใน CSS เขียน HTML ใน HTML
กลับในวันที่มีการอภิปรายร้อนว่าหนึ่งควรเขียนพื้นเมือง สภาด้วยมือหรือใช้ภาษาระดับสูงเช่น C เพื่อให้คอมไพเลอร์สร้างรหัสสมัชชาสำหรับคุณ แม้กระทั่งก่อนหน้านั้นผู้คนปฏิเสธที่จะเชื่อถือแอสเซมบลีและต้องการเขียนรหัสเครื่องด้วยมือ ( และฉันไม่ได้ล้อเล่น )
ในขณะเดียวกันในวันนี้มีจำนวนมากของคนที่เขียน HTML ในHamlหรือหยก , CSS ในSassหรือหักและ JavaScript ในCoffeeScriptหรือtypescript มันอยู่ที่นั่น มันได้ผล. บางคนชอบมัน แต่บางคนก็ไม่ชอบ
ประเด็นก็คือว่ามีอะไรผิดมูลฐานในไม่เขียน JavaScript ในวานิลลา JavaScript, CSS ใน CSS และ HTML ใน HTML มันเป็นเรื่องของการตั้งค่า
DSL ภายในกับภายนอก
การห่อหุ้มสไตล์โดยใช้ Shadow DOM React แทนมีสิ่งนี้ซึ่งต้องการการเขียน CSS ใน JavaScript ไม่สวย.
สวยหรือไม่นั้นมันแสดงออกอย่างแน่นอน JavaScript เป็นภาษาที่ทรงพลังมากมีประสิทธิภาพมากกว่า CSS (รวมถึงตัวประมวลผลล่วงหน้า CSS ใด ๆ ) มันขึ้นอยู่กับว่าคุณชอบ DSL ภายในหรือภายนอกสำหรับสิ่งเหล่านั้น อีกครั้งเป็นเรื่องของการตั้งค่า
(หมายเหตุ: ฉันกำลังพูดถึงสไตล์อินไลน์ใน Reactที่อ้างอิงในคำถามเดิม)
ประเภทของ DSL - คำอธิบาย
ปรับปรุง: อ่านคำตอบของฉันหลังจากเขียนมันฉันคิดว่าฉันต้องอธิบายสิ่งที่ฉันหมายถึงที่นี่ DSL เป็นภาษาเฉพาะโดเมนและสามารถเป็นได้ทั้งภายใน (ใช้ไวยากรณ์ของภาษาแม่ข่ายเช่น JavaScript - เช่นเช่น React ไม่มี JSX หรือชอบ inline style ใน React ที่กล่าวถึงข้างต้น) หรืออาจเป็นภายนอก (ใช้ไวยากรณ์ที่แตกต่างกัน กว่าภาษาโฮสต์ - เหมือนในตัวอย่างนี้จะเป็น inlining CSS (DSL ภายนอก) ภายใน JavaScript)
อาจสับสนเพราะวรรณกรรมบางเล่มใช้คำศัพท์ที่แตกต่างจาก "ภายใน" และ "ภายนอก" เพื่ออธิบาย DSL เหล่านั้น บางครั้งใช้ "ฝังตัว" แทน "ภายใน" แต่คำว่า "ฝังตัว" อาจหมายถึงสิ่งต่าง ๆ - ตัวอย่างเช่น Lua อธิบายว่า "Lua: ภาษาฝังตัวที่สามารถขยายได้" ซึ่งฝังตัวไม่เกี่ยวข้องกับ DSL ฝังตัว (ภายใน) รู้สึกว่ามันค่อนข้างตรงข้าม - DSL ภายนอก) แต่หมายความว่ามันฝังอยู่ในความหมายเดียวกันว่า SQLite เป็นฐานข้อมูลแบบฝังตัว มีแม้แต่eLuaที่ "e" หมายถึง "ฝังตัว" ในแง่ที่สาม - มันมีไว้สำหรับระบบฝังตัว! นั่นเป็นเหตุผลที่ฉันไม่ชอบการใช้คำว่า "Embedded DSL" เพราะสิ่งต่าง ๆ เช่น eLua อาจเป็น "DSLs" ที่ "ฝังตัว" ในประสาทสัมผัสสองแบบที่แตกต่างกันในขณะที่ไม่ได้เป็น "ฝัง DSL" เลย!
เพื่อทำให้สิ่งเลวร้ายลงบางโครงการแนะนำให้สับสนมากขึ้น เช่น. แม่แบบ Flatironมีคำอธิบายว่า "ปลอด DSL" ในความเป็นจริงมันเป็นเพียงตัวอย่างที่สมบูรณ์แบบของ DSL ภายในที่มีไวยากรณ์ดังนี้:map.where('href').is('/').insert('newurl');
เมื่อฉันเขียนว่า "JavaScript เป็นภาษาที่ทรงพลังมากมีประสิทธิภาพมากกว่า CSS (รวมถึง CSS preprocessors ใด ๆ ) มันขึ้นอยู่กับว่าคุณชอบ DSL ภายในหรือภายนอกสำหรับสิ่งต่าง ๆ เหล่านั้นอีกครั้ง เรื่องของการตั้งค่า " ฉันกำลังพูดถึงสองสถานการณ์เหล่านี้:
หนึ่ง:
/** @jsx React.DOM */
var colored = {
color: myColor
};
React.renderComponent(<div style={colored}>Hello World!</div>, mountNode);
สอง:
// SASS:
.colored {
color: $my-color;
}
// HTML:
<div class="colored">Hello World!</div>
ตัวอย่างแรกใช้สิ่งที่อธิบายไว้ในคำถามว่า: "การเขียน CSS ใน JavaScript ไม่สวย" ตัวอย่างที่สองใช้ Sass ในขณะที่ฉันยอมรับว่าการใช้ JavaScript เพื่อเขียน CSS อาจไม่สวย (สำหรับคำจำกัดความบางอย่างของ "สวย") แต่มีข้อดีอย่างหนึ่งของการทำมัน
ฉันสามารถมีตัวแปรและฟังก์ชั่นใน Sass แต่มีการกำหนดขอบเขตหรือขอบเขตแบบไดนามิกหรือไม่ พวกเขาจะพิมพ์แบบคงที่หรือแบบไดนามิก? รุนแรงหรืออ่อนแอ? ชนิดตัวเลขเป็นอย่างไร พิมพ์ coersion หรือไม่ ค่าใดที่เป็นความจริงและเป็นเท็จ ฉันสามารถมีฟังก์ชั่นการสั่งซื้อที่สูงขึ้นได้ไหม? recursion? โทรหาง? การปิดคำศัพท์? พวกเขาได้รับการประเมินตามคำสั่งปกติหรือคำสั่งสมัครหรือไม่? มีการประเมินผลที่ขี้เกียจหรือกระตือรือร้น? มีการขัดแย้งกับฟังก์ชั่นที่ส่งผ่านโดยค่าหรือโดยการอ้างอิง? พวกเขาไม่แน่นอนหรือไม่ ไม่เปลี่ยนรูป? หมั่น? แล้ววัตถุล่ะ? เรียน? ต้นแบบ? มรดก?
นี่ไม่ใช่คำถามที่ไม่สำคัญและฉันต้องรู้คำตอบถ้าฉันต้องการเข้าใจรหัส Sass หรือ Less ฉันรู้คำตอบสำหรับ JavaScript อยู่แล้วดังนั้นจึงหมายความว่าฉันเข้าใจ DSL ภายในทุกตัว (เช่นรูปแบบอินไลน์ใน React) ในระดับที่มากดังนั้นถ้าฉันใช้ React แล้วฉันต้องรู้คำตอบชุดเดียวเท่านั้น ) คำถามขณะที่ฉันใช้สำหรับเช่น Sass และ Handlebars จากนั้นฉันต้องรู้สามชุดคำตอบเหล่านั้นและเข้าใจความหมายของมัน
มันไม่ได้บอกว่าวิธีหนึ่งหรืออื่น ๆ จะดีกว่าเสมอ แต่ทุกครั้งที่คุณแนะนำภาษาอื่นให้มิกซ์คุณต้องจ่ายราคาบางอย่างที่อาจไม่ชัดเจนในการเห็นครั้งแรกและราคานี้มีความซับซ้อน
ฉันหวังว่าฉันจะอธิบายสิ่งที่ฉันตั้งใจไว้เล็กน้อยในตอนแรก
การผูกข้อมูล
ผูกพันสองทาง
นี่เป็นเรื่องที่น่าสนใจจริงๆและในความเป็นจริงก็เป็นเรื่องของการตั้งค่า สองทางไม่ได้ดีกว่าทางเดียวเสมอไป เป็นคำถามว่าคุณต้องการจำลองสถานะที่ไม่แน่นอนในแอปพลิเคชันของคุณอย่างไร ฉันมักจะมองว่าการผูกสองทางเป็นความคิดที่ค่อนข้างขัดกับหลักการของการเขียนโปรแกรมฟังก์ชั่น แต่การเขียนโปรแกรมการทำงานไม่ใช่กระบวนทัศน์เดียวที่ทำงานได้บางคนชอบพฤติกรรมแบบนี้และวิธีการทั้งสองดูเหมือนจะทำงานได้ค่อนข้างดีในทางปฏิบัติ หากคุณสนใจในรายละเอียดของการตัดสินใจออกแบบที่เกี่ยวข้องกับการสร้างแบบจำลองของรัฐใน React ให้ดูการพูดคุยของ Pete Hunt (เชื่อมโยงกับคำถาม) และการพูดคุยโดย Tom Occhino และ Jordan Walke ซึ่งอธิบายได้เป็นอย่างดี ความคิดเห็นของฉัน.
อัปเดต:โปรดดูการพูดคุยอื่นโดย Pete Hunt: สามารถคาดเดาได้ไม่ถูกต้อง: การเขียนโปรแกรม DOM ที่ใช้งานได้
อัปเดต 2:น่าสังเกตว่านักพัฒนาหลายคนโต้เถียงกับการไหลของข้อมูลสองทิศทางหรือการผูกสองทางบางคนถึงกับเรียกว่าเป็นรูปแบบการต่อต้าน Take เช่นฟลักซ์สถาปัตยกรรมโปรแกรมที่ชัดเจนหลีกเลี่ยงMVCรุ่น (ที่พิสูจน์แล้วว่าเป็นเรื่องยากที่จะไต่สำหรับ Facebook ขนาดใหญ่และ Instagram โปรแกรม) ในความโปรดปรานของการไหลของข้อมูลทิศทางเดียวอย่างเคร่งครัด (ดูวิธี Hacker: ทบทวนการพัฒนา Web App ที่ Facebookพูดคุยโดย Tom Occhino, Jing Chen และ Pete Hunt สำหรับการแนะนำที่ดี) นอกจากนี้ยังมีบทวิจารณ์มากมายเกี่ยวกับAngularJS (เฟรมเวิร์กเว็บที่ได้รับความนิยมสูงสุดที่ยึดตามโมเดล MVC ซึ่งรู้จักกันดีสำหรับการโยงข้อมูลแบบสองทาง) รวมถึงการขัดแย้งกับการไหลของข้อมูลสองทิศทางนั้นดู:
อัปเดต 3:บทความที่น่าสนใจอีกข้อที่อธิบายปัญหาที่กล่าวข้างต้นอย่างชัดเจนคือDeconstructing Flux ของ ReactJS - ไม่ใช้ MVC กับ ReactJSโดย Mikael Brassman ผู้เขียนRefluxJS (ไลบรารีที่ง่ายสำหรับสถาปัตยกรรมแอปพลิเคชั่นการไหลของข้อมูลทางทิศทาง
อัปเดต 4: Ember.jsกำลังหายไปจากการเชื่อมโยงข้อมูลแบบสองทางและในรุ่นอนาคตจะเป็นแบบทางเดียวโดยค่าเริ่มต้น ดู: อนาคตของ Emberพูดคุยโดย Stefan Penner จาก Embergarten Symposium ในโตรอนโตเมื่อวันที่ 15 พฤศจิกายน 2014
อัปเดต 5:ดูเพิ่มเติม: เส้นทางสู่ Ember 2.0 RFC - การสนทนาที่น่าสนใจในคำขอดึงโดย Tom Dale :
"เมื่อเราออกแบบเลเยอร์ templating ดั้งเดิมเราคิดว่าการผูกข้อมูลทั้งหมดแบบสองทางไม่เป็นอันตรายมาก: หากคุณไม่ได้ตั้งค่าการผูกสองทางมันเป็นความผูกพันแบบทางเดียว!
เราได้รับรู้มาแล้ว (ด้วยความช่วยเหลือจากเพื่อนของเราที่ React) ส่วนประกอบนั้นต้องการที่จะสามารถส่งข้อมูลไปยังลูก ๆ ของพวกเขาได้โดยไม่ต้องระวังสำหรับการกลายพันธุ์แบบเอาแต่ใจ
นอกจากนี้การสื่อสารระหว่างส่วนประกอบมักจะแสดงเป็นธรรมชาติมากที่สุดเป็นเหตุการณ์หรือการเรียกกลับ นี้เป็นไปได้ใน Ember แต่การครอบงำของการผูกข้อมูลสองทางมักจะนำคนลงเส้นทางของการใช้ผูกสองทางเป็นช่องทางในการสื่อสาร นักพัฒนาที่มีประสบการณ์ Ember ไม่ได้ทำผิดพลาด (โดยปกติ) แต่เป็นเรื่องง่ายที่จะทำ " [เน้นการเพิ่ม]
Native กับ VM
การสนับสนุนเบราว์เซอร์ดั้งเดิม (อ่าน "รับประกันว่าจะเร็วขึ้น")
ในที่สุดก็มีบางอย่างที่ไม่ใช่เรื่องของความเห็น
จริง ๆ แล้วที่นี่เป็นวิธีอื่น ๆ แน่นอนว่าโค้ด "เนทีฟ" สามารถเขียนได้ใน C ++ แต่คุณคิดว่าเอ็นจิ้น JavaScript นั้นเขียนด้วยอะไร?
ตามความเป็นจริงแล้วเครื่องมือจาวาสคริปต์นั้นน่าทึ่งอย่างแท้จริงในการปรับแต่งที่พวกเขาใช้ในปัจจุบัน - และไม่เพียง แต่ V8 อีกต่อไปเท่านั้น SpiderMonkey และ Chakra ยังส่องวันนี้อีกด้วย และโปรดจำไว้ว่าด้วยคอมไพเลอร์ของ JIT รหัสไม่เพียง แต่เป็นภาษาดั้งเดิมอย่างที่ควรจะเป็นเท่านั้น แต่ยังมีโอกาสเพิ่มประสิทธิภาพเวลาทำงานที่ไม่สามารถทำได้ในรหัสที่รวบรวมแบบคงที่
เมื่อคนคิดว่า JavaScript ช้าพวกเขามักจะหมายถึง JavaScript ที่เข้าถึง DOM DOM ช้า มันเป็นภาษาพื้นเมืองเขียนด้วยภาษาซีพลัสพลัส แต่มันช้าเหมือนนรกเพราะความซับซ้อนที่ต้องใช้
เปิดคอนโซลของคุณและเขียน:
console.dir(document.createElement('div'));
และดูจำนวนคุณสมบัติของdivองค์ประกอบว่างเปล่าที่ไม่ได้เชื่อมต่อกับ DOM เพื่อนำไปใช้ เหล่านี้เป็นเพียง คุณสมบัติระดับแรกที่เป็น "คุณสมบัติของตัวเอง" เช่น ไม่สืบทอดจากลูกโซ่ต้นแบบ:
จัด, เปิด, onvolumechange, ontimeupdate, onsuspend, onsubmit, onstalled, onsmous, onsmouse, onsmouse, onsmouse, onsmouse, onseek, onseek, onscet, onreset, onrate, onrate, onplay onmouseenter, onmousedown, onloadstart, onloadedmetadata, onloadeddata, onload, บนแป้นพิมพ์, onkeypress, onkeypress, onkeydown, onkeyval, oninvalid, onfocus, onerror, onended, ondieded ondied การเปลี่ยนแปลงบน oncontextmenu, onclose, onclick, onchange, oncanplaythrough, oncanplay, oncancel, onblur, onblur, onabort, ส่วนเสริม, ชื่อย่อย, คาถา, isContentEditable, contentEditable, outerText, accessTey, ซ่อน, webkitdropzone, ลากแท็บfirstElementChild, เด็ก ๆ , ถัดไป EtherSibling, ก่อนหน้า ElementSibling, onwheel, onwebkitfullscreenerror, ส่วนต่อท้าย, เลเวล, เลเวล, เลเวล, เลเวล, เลเวล, เลเวล, เลเวล, เลเยอร์ clientHeight, clientWidth, clientTop, clientLeft, offsetParent, offsetHeight, offsetWidth, offsetTop, offsetLop, offsetLeft, localName, คำนำหน้า, namespaceURI, id, ลักษณะ, แท็ก, parentElement, textContent parentNode, nodeType, nodeValue, nodeNameoncopy, onbeforepaste, onbeforecut, onbeforecopy, webkitShadowRoot, ชุดข้อมูล, classList, offsetName, อ็อฟเซ็ต, อ็อฟเซ็ต, ส่วนต่อท้าย, ส่วนขยาย, ส่วนขยาย, ส่วนขยาย, ส่วนขยาย, ความสูง namespaceURI, id, ลักษณะ, คุณลักษณะ, tagName, parentElement, textContent, baseURI, ownerDocument, nextSibling, nextSibling, lastChild, lastChild, firstChild, childNode, parentNode, nodeType, nodeValue, nodeNameoncopy, onbeforepaste, onbeforecut, onbeforecopy, webkitShadowRoot, ชุดข้อมูล, classList, offsetName, อ็อฟเซ็ต, อ็อฟเซ็ต, ส่วนต่อท้าย, ส่วนขยาย, ส่วนขยาย, ส่วนขยาย, ส่วนขยาย, ความสูง namespaceURI, id, ลักษณะ, คุณลักษณะ, tagName, parentElement, textContent, baseURI, ownerDocument, nextSibling, nextSibling, lastChild, lastChild, firstChild, childNode, parentNode, nodeType, nodeValue, nodeNameparentElement, textContent, baseURI, ownerDocument, nextSibling, lastSibling, lastChild, firstChild, childNode, parentNode, nodeType, nodeValue, nodeNameparentElement, textContent, baseURI, ownerDocument, nextSibling, lastSibling, lastChild, firstChild, childNode, parentNode, nodeType, nodeValue, nodeName
หลายคนเป็นวัตถุซ้อนกัน - หากต้องการดูคุณสมบัติระดับที่สอง (ของตัวเอง) ของเจ้าของภาษาที่ว่างเปล่าdivในเบราว์เซอร์ของคุณให้ดูซอนี้
ฉันหมายถึงอย่างจริงจังคุณสมบัติonvolumechangeบนทุกโหนด div เดียว? มันเป็นความผิดพลาดหรือไม่? ไม่เป็นเพียงรุ่นดั้งเดิมของเหตุการณ์ในระดับ DOM รุ่น 0 ของหนึ่งในตัวจัดการเหตุการณ์ "ที่ต้องได้รับการสนับสนุนจากองค์ประกอบ HTML ทั้งหมดเนื่องจากทั้งแอตทริบิวต์เนื้อหาและแอตทริบิวต์ IDL" [เน้นเพิ่ม] ในส่วน 6.1.6.2ของข้อมูลจำเพาะ HTML โดย W3C - ไม่มีทางรอบ ๆ มัน
ในขณะเดียวกันเหล่านี้เป็นคุณสมบัติระดับแรกของ DOM ปลอมdivใน React:
อุปกรณ์ประกอบฉาก, _owner, _lifeCycleState, _pendingProps, _pendingCallbacks, _pendingOwner
ค่อนข้างแตกต่างใช่มั้ย ในความเป็นจริงนี่เป็นวัตถุทั้งหมดที่ต่อเนื่องกันเป็น JSON ( LIVE DEMO ) เพราะที่จริงแล้วคุณสามารถ ทำให้เป็นอนุกรมกับ JSON ได้เนื่องจากมันไม่มีการอ้างอิงแบบวงกลมใด ๆ - สิ่งที่คิดไม่ถึงในโลกของ DOM พื้นเมือง ( ซึ่งมันจะทำให้เกิดข้อยกเว้น ):
{
"props": {},
"_owner": null,
"_lifeCycleState": "UNMOUNTED",
"_pendingProps": null,
"_pendingCallbacks": null,
"_pendingOwner": null
}
นี่คือเหตุผลหลักว่าทำไม React ถึงเร็วกว่า DOM เบราว์เซอร์ดั้งเดิม - เพราะไม่ต้องใช้ระเบียบนี้
ดูการนำเสนอนี้โดย Steven Luscherเพื่อดูว่าเร็วกว่าอะไร: DOM ดั้งเดิมที่เขียนใน C ++ หรือ DOM ปลอมที่เขียนด้วย JavaScript ทั้งหมด มันเป็นการนำเสนอที่ยุติธรรมและสนุกสนาน
อัปเดต: Ember.jsในรุ่นอนาคตจะใช้ DOM เสมือนซึ่งได้รับแรงบันดาลใจอย่างหนักจาก React เพื่อปรับปรุงประสิทธิภาพ ดู: อนาคตของ Emberพูดคุยโดย Stefan Penner จาก Embergarten Symposium ในโตรอนโตเมื่อวันที่ 15 พฤศจิกายน 2014
ในการสรุป: คุณสมบัติจาก Web Components เช่นแม่แบบการผูกข้อมูลหรือองค์ประกอบที่กำหนดเองจะมีข้อดีมากกว่า React แต่จนกว่าตัวแบบวัตถุเอกสารจะได้รับการทำให้ง่ายขึ้นอย่างมากจากนั้นประสิทธิภาพจะไม่เป็นหนึ่งในนั้น
ปรับปรุง
สองเดือนหลังจากที่ฉันโพสต์คำตอบนี้มีข่าวบางอย่างที่เกี่ยวข้องที่นี่ ตามที่ฉันเพิ่งเขียนบน Twitterเครื่องมือแก้ไขข้อความAtomรุ่นล่าสุดที่เขียนโดย GitHub ใน JavaScript ใช้ React ของ Facebook เพื่อประสิทธิภาพที่ดีขึ้นแม้ว่าจะอ้างอิงจาก Wikipedia "Atom นั้นใช้ Chromium และเขียนด้วย C ++" ดังนั้นจึงมีการควบคุมเต็มรูปแบบ การใช้งาน C ++ DOM ดั้งเดิม (ดูที่นิวเคลียสของ Atom ) และ รับประกันว่าจะมีการสนับสนุน Web Components เนื่องจากมาพร้อมกับเว็บเบราว์เซอร์ของตนเอง มันเป็นเพียงตัวอย่างล่าสุดของโครงการในโลกแห่งความเป็นจริงที่สามารถใช้การเพิ่มประสิทธิภาพชนิดอื่น ๆ ซึ่งโดยทั่วไปจะไม่สามารถใช้งานได้กับเว็บแอปพลิเคชันและยังได้เลือกใช้ React ซึ่งเขียนด้วย JavaScript เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด ไม่ได้ถูกสร้างด้วย React เพื่อเริ่มต้นดังนั้นการทำเช่นนั้นจึงไม่ใช่การเปลี่ยนแปลงเล็กน้อย
อัปเดต 2
มีการเปรียบเทียบที่น่าสนใจโดย Todd Parkerโดยใช้WebPagetestเพื่อเปรียบเทียบประสิทธิภาพของตัวอย่างTodoMVCที่เขียนใน Angular, Backbone, Ember, Polymer, CanJS, YUI, Knockout, React และ Shoestring นี่เป็นการเปรียบเทียบอย่างมีวัตถุประสงค์ที่สุดที่ฉันเคยเห็น สิ่งที่สำคัญที่นี่คือตัวอย่างทั้งหมดนั้นเขียนโดยผู้เชี่ยวชาญในกรอบเหล่านั้นทั้งหมดมีอยู่ใน GitHubและสามารถปรับปรุงได้โดยทุกคนที่คิดว่ารหัสบางส่วนสามารถปรับให้ทำงานเร็วขึ้น
อัปเดต 3
Ember.jsในรุ่นอนาคตจะมีคุณสมบัติของ React ที่กล่าวถึงในที่นี้ (รวมถึง DOM เสมือนและการผูกข้อมูลทิศทางเดียวเพื่อตั้งชื่อเพียงไม่กี่) ซึ่งหมายความว่าแนวคิดที่มีต้นกำเนิดใน React นั้นได้ย้ายเข้าสู่กรอบงานอื่นแล้ว ดู: The Road to Ember 2.0 RFC - การสนทนาที่น่าสนใจในคำขอดึงโดย Tom Dale (วันที่เริ่ม: 2014-12-03): "ใน Ember 2.0 เราจะใช้" virtual DOM "และรูปแบบการไหลของข้อมูลที่รวบรวม แนวคิดที่ดีที่สุดจาก React และทำให้การสื่อสารระหว่างส่วนประกอบง่ายขึ้น "
เช่นเดียวกันAngular.js 2.0กำลังใช้แนวคิดจำนวนมากที่กล่าวถึงที่นี่
อัปเดต 4
ฉันต้องอธิบายรายละเอียดในประเด็นบางประเด็นเพื่อตอบความคิดเห็นนี้โดย Igwe Kalu:
"ไม่สมเหตุสมผลที่จะเปรียบเทียบ React (JSX หรือเอาต์พุตการคอมไพล์) กับ JavaScript ธรรมดาเมื่อ React ลดลงเป็น JavaScript ธรรมดาในที่สุด [... ] ไม่ว่ากลยุทธ์ใดที่ React ใช้สำหรับการแทรก DOM สามารถนำไปใช้โดยไม่ต้องใช้ React ไม่ได้เพิ่มประโยชน์พิเศษใด ๆ เมื่อพิจารณาคุณสมบัติที่เป็นปัญหานอกเหนือจากความสะดวกสบาย " (ความคิดเห็นแบบเต็มที่นี่ )
ในกรณีที่มันไม่ชัดเจนพอในส่วนของคำตอบของฉันฉันกำลังเปรียบเทียบประสิทธิภาพการทำงานโดยตรงบนDOM ดั้งเดิม (ถูกใช้เป็นวัตถุโฮสต์ในเบราว์เซอร์) เทียบกับDOM ปลอม / เสมือนของ React (นำมาใช้ใน JavaScript) จุดที่ฉันพยายามทำคือ DOM เสมือนที่ใช้ใน JavaScript สามารถมีประสิทธิภาพเหนือกว่า DOM จริงที่ใช้ใน C ++ และไม่ใช่ว่า React สามารถทำได้ดีกว่า JavaScript (ซึ่งเห็นได้ชัดว่าไม่ได้มีเหตุผลมากนักเนื่องจากมันถูกเขียนด้วย JavaScript) ประเด็นของฉันคือรหัส "C ++" ไม่รับประกันเสมอว่าจะเร็วกว่า JavaScript "ที่ไม่ใช่เจ้าของภาษา" การใช้ React เพื่ออธิบายจุดนั้นเป็นเพียงตัวอย่างเท่านั้น
แต่ความคิดเห็นนี้ได้สัมผัสกับปัญหาที่น่าสนใจ ในความเป็นจริงที่คุณไม่ต้องการกรอบใด ๆ (ตอบสนองเชิงมุมหรือ jQuery) ไม่ว่าด้วยเหตุผลใด ๆ (เช่นประสิทธิภาพความสะดวกในการพกพาคุณสมบัติ) เพราะคุณสามารถสร้างสิ่งที่กรอบทำเพื่อคุณและบูรณาการล้อ - คุณสามารถพิสูจน์ค่าใช้จ่ายนั่นคือ
แต่ - เดฟสมิ ธ อย่างวางไว้ในวิธีการพลาดจุดเมื่อเปรียบเทียบประสิทธิภาพกรอบเว็บ : "เมื่อเปรียบเทียบสองกรอบเว็บคำถามคือไม่สามารถ app ของฉันได้อย่างรวดเร็วด้วยกรอบ X. คำถามคือจะ app ของฉันได้อย่างรวดเร็วด้วยกรอบ เอ็กซ์"
ในคำตอบ 2011 ของฉันไปที่: อะไรคือเหตุผลทางเทคนิคเชิงประจักษ์ที่จะไม่ใช้ jQueryฉันอธิบายปัญหาที่คล้ายกันว่ามันเป็นไปไม่ได้ที่จะเขียนโค้ด DOM-manipulation แบบพกพาที่ไม่มีห้องสมุดเช่น jQuery แต่คนไม่ค่อยทำ
เมื่อใช้ภาษาโปรแกรมไลบรารีหรือเฟรมเวิร์กผู้คนมักจะใช้วิธีที่สะดวกที่สุดหรือเป็นไปได้ในการทำสิ่งต่าง ๆ ไม่ใช่สิ่งที่สมบูรณ์แบบ แต่ไม่สะดวก คุณค่าที่แท้จริงของเฟรมเวิร์กที่ดีคือการทำให้ง่ายในสิ่งที่ทำได้ยากและความลับทำให้สิ่งที่ถูกต้องสะดวก ผลลัพธ์ยังคงมีกำลังเท่าเดิมเมื่อคุณกำจัดแคลคูลัสแลมบ์ดารูปแบบที่ง่ายที่สุดหรือเครื่องทัวริงดั้งเดิมส่วนใหญ่ แต่ความหมายเชิงสัมพัทธ์ของแนวคิดบางอย่างนั้นหมายความว่าแนวคิดเหล่านั้นมีแนวโน้มที่จะแสดงออกได้ง่ายขึ้นหรือเลยและ การแก้ปัญหาที่ถูกต้องไม่เพียงเป็นไปได้ แต่นำไปปฏิบัติอย่างกว้างขวาง
อัปเดต 5
React + Performance =? บทความโดย Paul Lewis เมื่อเดือนกรกฎาคม 2558 แสดงตัวอย่างว่า React ช้ากว่าวานิลลา JavaScript ที่เขียนด้วยมือเพื่อแสดงรายการภาพ Flickr ที่ไม่มีที่สิ้นสุดซึ่งมีความสำคัญอย่างยิ่งบนมือถือ ตัวอย่างนี้แสดงว่าทุกคนควรทดสอบประสิทธิภาพสำหรับกรณีการใช้งานเฉพาะและแพลตฟอร์มเป้าหมายและอุปกรณ์เฉพาะ
ขอขอบคุณที่เควิน Lozandierสำหรับนำไปให้ความสนใจของฉัน