반응 단방향 데이터 바인딩과 Angular의 양방향 데이터 바인딩의 차이를 설명할 수 있는 사람?

반응 단방향 데이터 바인딩과 Angular의 양방향 데이터 바인딩의 차이를 설명할 수 있는 사람?

Angular에서 동일한 ToDo 앱을 완전히 구축하면 이 개념에 대해 조금 모호합니다.JS 및 ReactJs--- React ToDo가 단방향 데이터 바인딩을 사용하는 이유와JS의 양방향 데이터 바인딩?

리액트는 뭐랄까

렌더링(데이터) ---> 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" />

은 먼저 , 하다, 하다로 시작합니다.test로 합니다.another1000달러「 」의 $scope.name컨트롤러 코드를 사용하거나 입력을 변경하여 4000ms 후에 콘솔로그에 반영됩니다.「 」로의 <input />되어 있습니다.$scope.nameng-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 />에 의해 완전히 제어됩니다.render 입니다.컴포넌트는 컴포넌트 자체를 사용하여 갱신할 수 있습니다.컴포넌트 자체에서는onChange에 대한 <input />「」를 합니다.this.state.value 메서드를 하여 에 .setState . 。<input />는 컴포넌트 상태에 직접 액세스할 수 없기 때문에 변경할 수 없습니다.이건 단방향 바인딩입니다. (이 코드 좀 보세요)

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

React.js에 관해서는 실제로는 양방향 데이터 바인딩을 위해 설계된 것은 아니지만 몇 가지 로직을 추가하여 양방향 바인딩을 수동으로 구현할 수 있습니다.예를 들어 이 링크를 참조하십시오.앵귤러에서.JS 쌍방향 바인딩은 퍼스트 클래스 시티즌이므로 이 로직을 추가할 필요가 없습니다.

데이터 바인딩이란 무엇입니까?

데이터 바인딩은 공급자와 소비자의 데이터 소스를 함께 바인딩하고 동기화하는 일반적인 기술입니다.

각도별 데이터 결합

AngularJs 문서에 따르면 데이터 바인딩(Angular)JS 앱은 모델과 뷰 구성 요소 간의 데이터 자동 동기화입니다.뷰는 항상 모델의 투영입니다.모델이 변경되면 뷰에 변경 내용이 반영되며, 그 반대도 마찬가지입니다.

템플릿(추가 마크업 또는 지시문과 함께 컴파일되지 않은HTML)이 브라우저에 컴파일 됩니다.컴파일 단계에서는 라이브 뷰가 생성됩니다.뷰에 대한 변경 사항은 즉시 모델에 반영되고 모델의 변경 사항은 뷰로 전파됩니다.

ReactJs에서의 데이터 바인딩

보기에 표시할 데이터와 구성 요소의 논리 사이의 연결을 ReactJS에서는 데이터 바인딩이라고 합니다.ReactJ는 단방향 데이터 바인딩을 사용합니다.단방향 데이터 바인딩에서는 다음 조건 중 하나를 따를 수 있습니다.

• 표시할 컴포넌트:컴포넌트 데이터의 변경은 뷰에 반영됩니다.
• 컴포넌트 표시:View의 변경 내용은 구성 요소의 데이터에 반영됩니다.

여기랑 여기랑 더 읽어주세요.

React는 즉시 양방향 데이터 바인딩을 제공하지 않지만, 특히 복잡한 단일 페이지 또는 React Native 애플리케이션에서 작업하거나 많은 비동기적으로 조정된 데이터, 변환 및 로직을 사용하는 경우 이러한 바인딩이 자연스러운 상태 관리 메커니즘처럼 보이는 사용 사례가 많습니다.

react-bindings는 편리한 양방향 바인딩 지원 및 React/React Native 및 react-waitable 빌드를 위한 도구를 추가하여 비동기식 지원을 추가로 지원합니다.이 패키지는 특히 React 훅 및 컨텍스트와 조합하여 사용되므로 React vs Angular를 사용한다는 이유만으로 단방향 모델과 양방향 모델 사이에서 엄밀하게 선택할 필요가 없습니다.

한 가지 방법은 데이터 바인딩이 매우 간단하지만 React에서는 데이터 흐름 방식을 나타낼 때 바인딩이라는 단어를 거의 사용하지 않습니다.

  const fn = (a) => { return ... }

값이 다음과 같이 제공되는 경우a함수 범위에서 이 값을 사용합니다.위는 프로그래밍 101입니다.

  <Title name={"Hello"} />

위의 행은 "Hello"가 Title 함수로 전송되어 하나의 프로펠을 "Hello"로 설정하는 것 이외에는 마법처럼 어떤 일도 일어나지 않는다는 것을 의미하지 않습니다.여기서 bind라는 단어를 사용해야 할 경우 bind가 발생합니다.

이 소품을 사용하여 다른 주(州)와 표시하거나 배선하거나 하고 싶은 경우 스스로 코드를 작성해야 합니다.다른 마법은 없어그나저나 리액트에서는 이걸 소품이라고 해그리고 소품은 객체 형식으로 코드화된 함수의 입력 인수입니다.따라서 React에서 이 "바인드"에 대한 보다 정확한 정의는 할당이라고 할 수 있습니다.React 소스 코드에서는 요소가 생성된 후 매우 빠르게 무언가를 볼 수 있습니다.

  element.props = { name: "Hello" }

그리고 믿거나 말거나, 리액트에는 나중에 이 "바인드"와 관련된 다른 코드는 없습니다.

예

입력 예를 사용합니다.

<input value={value} onChange={onChange} />

만약 우리가 a를 준다면value로.input입력이 값을 선택하여 표시합니다.값을 변경할 경우 표시를 변경할 예정입니다.

왜?value변경하시겠습니까?기본적으로는 할 수 없습니다.다음과 같은 시스템 이벤트를 듣고 변경해야 합니다.onChange또는 다음과 같은 비즈니스 논리setTimeout어떤 식으로든 상상하실 수 있어요그러나 변경은 작업입니다. 따라서 값을 변경하여 작업을 처리할 수 있습니다.'일방통행'이 여기서 비롯된 것 같아요.기본적으로 공짜는 없다.

혼란

혼란스러운 것은 DOM 요소가 자체 상태 또는 속성을 가지고 있다는 것입니다.예를 들어, 우리는el.textContent="abc"리액트를 사용하지 않습니다.

<input />

이렇게 코드화만 하면 입력 후에도 화면상의 값이 변화합니다.그러나 이 동작은 React와는 관계가 없습니다.이것은 DOM 요소의 기능입니다.리액트는 첫 번째 버전을 제어된 요소라고 합니다.기본적으로 리액트는 DOM 방식을 덮어씁니다.

메모

솔직히 이런 경우에 구속이라는 말을 쓰지 않게 된 후에야 그게 뭔지 알 수 있었어요.하지만 그건 나뿐일 수도 있어.

언급URL : https://stackoverflow.com/questions/34519889/can-anyone-explain-the-difference-between-reacts-one-way-data-binding-and-angula