[javascript] 누구나 Reacts 단방향 데이터 바인딩과 Angular의 양방향 데이터 바인딩의 차이점을 설명 할 수 있습니까?

Program / 글쓴이

나는 이러한 개념에 대해 약간 모호합니다 .AngularJS와 ReactJS에서 동일한 ToDo 앱을 완전히 빌드하면 React ToDo가 단방향 데이터 바인딩과 AngularJS의 양방향 데이터 바인딩을 사용하는 이유는 무엇입니까?

나는 React가 다음과 같이 작동한다는 것을 이해합니다.

렌더링 (데이터) —> UI.

Angular와 어떻게 다른가요?

답변

모난

angular가 데이터 바인딩을 설정하면 두 개의 “감시자”가 존재합니다 (단순화).

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

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

입력은로 시작하여 1000ms test후에로 업데이트됩니다 another. $scope.name컨트롤러 코드에서 또는 입력을 변경하여에 대한 모든 변경 사항 은 4000ms 후에 콘솔 로그에 반영됩니다. 받는 사람 변경 <input />에 반영되어 $scope.name있기 때문에, 자동 특성 ng-model세트까지 입력 및 통지 시계 $scope변경합니다. 코드 변경 및 HTML 변경은 양방향 바인딩 입니다. ( 이 바이올린을 확인하십시오 )

반응

React에는 HTML이 구성 요소를 변경할 수있는 메커니즘이 없습니다. HTML은 구성 요소가 응답하는 이벤트 만 발생시킬 수 있습니다. 일반적인 예는 onChange.

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

의 값은 전적으로 함수에 의해 <input />제어 됩니다. 이 값을 갱신 할 수있는 유일한 방법은 부착에 의해 수행되는 성분 자체 내지 받는 이벤트를 한 세트 (가) 성분에있어서 반응로 . 는 그것을 변경할 수 없도록 구성 요소의 상태에 직접 액세스하고 있지 않습니다. 이것은 단방향 바인딩 입니다. (이 코드 펜 확인 )renderonChange<input />this.state.valuesetState<input />

답변

나는 작은 그림을 만들었습니다. 충분히 명확하길 바랍니다. 그렇지 않다면 알려주세요!

양방향 데이터 바인딩 VS 단방향 데이터 바인딩

답변

양방향 데이터 바인딩은 속성 값을 가져 와서 뷰에 표시하는 기능을 제공하는 동시에 모델의 값을 자동으로 업데이트하는 입력을 갖습니다. 예를 들어 뷰에 “task”속성을 표시하고 텍스트 상자 값을 동일한 속성에 바인딩 할 수 있습니다. 따라서 사용자가 텍스트 상자의 값을 업데이트하면 뷰가 자동으로 업데이트되고이 매개 변수의 값도 컨트롤러에서 업데이트됩니다. 반대로 단방향 바인딩은 모델의 값을 뷰에 바인딩 할 뿐이며 뷰의 값이 사용자에 의해 변경되었는지 확인하기위한 추가 감시자가 없습니다.

React.js와 관련하여 실제로 양방향 데이터 바인딩을 위해 설계되지는 않았지만 몇 가지 추가 논리를 추가하여 수동으로 양방향 바인딩을 구현할 수 있습니다 (예 :이 링크 참조) . Angular.JS에서 양방향 바인딩은 퍼스트 클래스 시민이므로이 추가 로직을 추가 할 필요가 없습니다.

답변