Tôi hơi mơ hồ về những khái niệm này, Nếu tôi xây dựng cùng một ứng dụng ToDo hoàn toàn trong AngularJS và ReactJS --- điều gì khiến React ToDo sử dụng liên kết dữ liệu một chiều so với liên kết dữ liệu hai chiều của AngularJS?

Tôi hiểu rằng loại React hoạt động như

Kết xuất (dữ liệu) ---> Giao diện người dùng.

Điều này khác với Angular như thế nào?

Angular

Khi angle thiết lập databinding tồn tại hai "watchers" (đây là một sự đơn giản hóa)

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

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

Đầu vào sẽ bắt đầu bằng test, sau đó cập nhật lên sau another1000ms. Bất kỳ thay đổi nào đối với $scope.name, từ mã bộ điều khiển hoặc bằng cách thay đổi đầu vào, sẽ được phản ánh trong nhật ký bảng điều khiển 4000ms sau đó. Các thay đổi đối với thuộc <input />tính được phản ánh $scope.nametự động vì ng-modelthiết lập sẽ xem dữ liệu đầu vào và thông báo $scopevề các thay đổi. Các thay đổi từ mã và các thay đổi từ HTML là liên kết hai chiều . (Kiểm tra trò chơi này )

Phản ứng

React không có cơ chế cho phép HTML thay đổi thành phần. HTML chỉ có thể nêu ra các sự kiện mà thành phần phản hồi. Ví dụ điển hình là bằng cách sử dụng onChange.

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

Giá trị của <input />được kiểm soát hoàn toàn bởi renderchức năng. Cách duy nhất để cập nhật giá trị này là từ chính thành phần, được thực hiện bằng cách đính kèm một onChangesự kiện vào sự kiện <input />được đặt this.state.valuevới phương thức thành phần React setState. Các <input />không có quyền truy cập trực tiếp đến tình trạng các thành phần, và vì vậy nó không thể thực hiện thay đổi. Đây là ràng buộc một chiều . (Kiểm tra codepen này )

Tôi đã thực hiện một bản vẽ nhỏ. Tôi hy vọng nó đủ rõ ràng. Hãy cho tôi biết nếu nó không phải là!

Liên kết dữ liệu hai chiều cung cấp khả năng lấy giá trị của thuộc tính và hiển thị nó trên dạng xem đồng thời có đầu vào để tự động cập nhật giá trị trong mô hình. Ví dụ: bạn có thể hiển thị thuộc tính "nhiệm vụ" trên dạng xem và liên kết giá trị hộp văn bản với cùng thuộc tính đó. Vì vậy, nếu người dùng cập nhật giá trị của hộp văn bản, chế độ xem sẽ tự động cập nhật và giá trị của tham số này cũng sẽ được cập nhật trong bộ điều khiển. Ngược lại, một cách ràng buộc chỉ ràng buộc giá trị của mô hình với chế độ xem và không có trình theo dõi bổ sung để xác định xem giá trị trong chế độ xem có bị người dùng thay đổi hay không.

Về React.js, nó không thực sự được thiết kế để liên kết dữ liệu hai chiều, tuy nhiên, bạn vẫn có thể triển khai ràng buộc hai chiều theo cách thủ công bằng cách thêm một số logic bổ sung, ví dụ như liên kết này . Trong Angular.JS ràng buộc hai chiều là công dân hạng nhất, vì vậy không cần thêm logic bổ sung này.