ฉันค่อนข้างคลุมเครือกับแนวคิดเหล่านี้หากฉันสร้างแอป ToDo เดียวกันอย่างสมบูรณ์ใน AngularJS และ ReactJS - อะไรทำให้ React ToDo ใช้การผูกข้อมูลทางเดียวกับการผูกข้อมูลสองทางของ AngularJS

ฉันเข้าใจว่า React ทำงานแบบนี้

การแสดงผล (ข้อมูล) ---> UI

สิ่งนี้แตกต่างจาก Angular อย่างไร?

เชิงมุม

เมื่อเชิงมุมตั้งค่าการเชื่อมโยงฐานข้อมูล "ผู้เฝ้าดู" สองคน (นี่คือการทำให้เข้าใจง่าย)

//js
$scope.name = 'test';
$timeout(function()  { $scope.name = 'another' }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);

<!-- html --->
<input ng-model="name" />

อินพุตจะเริ่มต้นด้วยtestจากนั้นอัปเดตเป็นanother1000ms การเปลี่ยนแปลงใด ๆ$scope.nameจากโค้ดคอนโทรลเลอร์หรือโดยการเปลี่ยนอินพุตจะแสดงในบันทึกคอนโซล 4000ms ในภายหลัง การเปลี่ยนแปลง<input />จะแสดงใน$scope.nameคุณสมบัติโดยอัตโนมัติเนื่องจากการng-modelตั้งค่าจะเฝ้าดูอินพุตและแจ้ง$scopeการเปลี่ยนแปลง การเปลี่ยนแปลงจากรหัสและการเปลี่ยนแปลงจาก HTML มีสองทางที่มีผลผูกพัน (ตรวจสอบซอนี้ )

ตอบสนอง

การตอบสนองไม่มีกลไกที่อนุญาตให้ HTML เปลี่ยนองค์ประกอบได้ HTML สามารถเพิ่มเหตุการณ์ที่คอมโพเนนต์ตอบสนองเท่านั้น ตัวอย่างทั่วไปคือการใช้onChange.

//js
render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
    this.setState({value: e.target.value});
}

ค่าของ<input />ถูกควบคุมทั้งหมดโดยrenderฟังก์ชั่น วิธีเดียวที่จะปรับปรุงค่านี้มาจากองค์ประกอบของตัวเองซึ่งจะกระทำโดยการแนบonChangeเหตุการณ์ไป<input />ซึ่งชุดที่จะตอบสนองกับวิธีส่วนประกอบthis.state.value ไม่ได้มีการเข้าถึงโดยตรงไปยังรัฐส่วนประกอบและดังนั้นจึงไม่สามารถทำให้เกิดการเปลี่ยนแปลง นี่คือทางเดียวที่มีผลผูกพัน (ตรวจสอบนี้codepen )setState<input />

ฉันวาดรูปเล็กน้อย ฉันหวังว่ามันจะชัดเจนพอ แจ้งให้เราทราบหากไม่ใช่!

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

เกี่ยวกับ React.js มันไม่ได้ออกแบบมาสำหรับการเชื่อมข้อมูลสองทางจริงๆอย่างไรก็ตามคุณยังสามารถใช้การเชื่อมสองทางด้วยตนเองได้โดยการเพิ่มตรรกะเพิ่มเติมดูตัวอย่างลิงก์นี้ ในการผูกแบบสองทาง Angular.JS เป็นพลเมืองชั้นหนึ่งดังนั้นจึงไม่จำเป็นต้องเพิ่มตรรกะเพิ่มเติมนี้