redux와 반응의 차이점은 무엇입니까

redux와 React의 차이점은 다음과 같습니다. 1. redux는 JavaScript 상태 컨테이너인 반면, React는 사용자 인터페이스를 구축하기 위해 Facebook에서 시작한 JavaScript 라이브러리입니다. 2. redux는 주로 상태 관리를 제공하는 반면, React는 주로 UI를 구축하는 데 사용됩니다. 등등 잠깐만요.

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "javascript basic tutorial"

Difference

redux

redux는 주로 상태 관리를 제공하는 JavaScript 상태 컨테이너입니다. 서버, 클라이언트 및 기본 애플리케이션에서 실행할 수 있습니다. React를 지원하는 것 외에도 다른 UI 프레임워크도 지원하며 크기가 2kb에 불과합니다. React와 함께 사용하면 React-redux 플러그인을 사용하여 개발 경험을 더욱 향상시킬 수 있습니다.

해당 API를 호출하거나 해당 메커니즘을 사용하여 이 컨테이너의 데이터를 변경할 수 있습니다. 다른 구성 요소는 컨테이너에서 새 데이터를 적극적으로 다시 가져와 다시 렌더링할 수 있습니다.

또한 이 컨테이너는 게시 및 구독 메커니즘도 지원해야 합니다. 즉, 특정 데이터가 변경되면 해당 데이터에 관심이 있는 구성 요소에 즉시 알림이 전달됩니다.

react

react는 사용자 인터페이스 구축을 위해 Facebook에서 출시한 JavaScript 라이브러리입니다. React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React를 MVC의 V(뷰)로 생각합니다. React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 이에 주목하고 사용하기 시작했습니다.

React는 데이터에 대한 HTML 보기를 제공하는 오픈 소스 JavaScript 라이브러리입니다. React 뷰는 일반적으로 사용자 정의 HTML 태그에 지정된 다른 구성 요소가 포함된 구성 요소를 사용하여 렌더링됩니다. React는 프로그래머에게 하위 구성 요소가 외부 구성 요소에 직접 영향을 미칠 수 없는 모델, 데이터 변경 시 HTML 문서에 대한 효율적인 업데이트, 최신 단일 페이지 애플리케이션의 구성 요소 간 명확한 분리를 제공합니다.

React와 Redux를 이해하기 위해 자신의 생각을 사용하는 방법을 배우세요. 명사를 설명하는 다른 사람의 말을 듣는 것은 매우 어렵습니다.

필요한 것부터 시작하여 React를 사용하는 데 필요한 것이 무엇인지 확인하세요.

1. React에는 props와 state가 있습니다. props는 상위가 배포한 속성을 의미하고, state는 구성 요소가 내부적으로 관리할 수 있는 상태를 의미하며, 전체 React는 그렇지 않습니다. 데이터를 위쪽으로 추적하는 능력은 데이터가 한 방향으로 아래쪽으로만 분산되거나 자체적으로 내부적으로 소화될 수 있음을 의미합니다.

이것을 이해하는 것이 React와 Redux를 이해하기 위한 전제조건입니다.

2. 일반적으로 구축된 React 구성 요소에는 자체적으로 잘 작동하는 완전한 애플리케이션이 내부에 있을 수 있으며 API로서의 속성을 통해 이를 제어할 수 있습니다. 그러나 React는 두 구성 요소가 서로 통신하고 서로의 데이터를 사용하는 것을 허용하지 않는 경우가 더 자주 발견됩니다.

현재 DOM(즉, React 시스템 내)을 통해 통신하지 않는 유일한 해결책은 상태를 개선하고 관리를 위해 상태를 공유 상위 구성 요소에 넣은 다음 하위 구성 요소에 props로 다시 배포하는 것입니다.

3. 하위 구성요소가 상위 구성요소의 상태를 변경하는 유일한 방법은 onClick을 통해 상위 구성요소가 선언한 콜백을 트리거하는 것입니다. 즉, 상위 구성요소는 설명할 함수나 메소드를 미리 선언합니다. 상태가 어떻게 변경되는지 확인한 후 동일한 속성으로 사용합니다. 속성은 사용을 위해 하위 구성 요소에 전달됩니다.

패턴이 나타납니다. 데이터는 항상 위에서 아래로 단방향으로 배포되지만, 하위 구성 요소 콜백만 개념적으로 상태의 최상위 수준으로 돌아가 데이터에 영향을 미칠 수 있습니다. 이런 식으로 국가는 어느 정도 반응합니다.

4. 가능한 모든 확장 문제에 대처하기 위해 가장 쉬운 방법은 모든 상태를 모든 구성 요소의 최상위 수준에 배치한 다음 이를 모든 구성 요소에 배포하는 것입니다.

5. 더 나은 상태 관리를 위해서는 이를 보다 전문적인 최상위 상태로 모든 React 애플리케이션에 배포하는 라이브러리가 필요합니다. 다시 돌아와서 위 구조를 재현하기 위한 요구 사항을 살펴보겠습니다.

콜백 알림 상태 필요(콜백 매개변수와 동일) ->

상태 필요(전체 상태와 동일) -> store

에는 Redux에 대해 다음 세 가지 요소만 있습니다.

action은 이벤트의 모든 요소만 제공하고 논리는 제공하지 않는 순수 선언적 데이터 구조입니다.

리듀서는 일치 기능이며 작업 전송은 전역적입니다. 모든 리듀서는 관련 여부에 관계없이 캡처하고 일치할 수 있습니다. 관련이 있는 경우 논리적 처리를 위해 작업의 요소를 제거하고 상태를 수정합니다. 관련이 없는 경우 상태는 처리하지 않고 그대로 반환됩니다.

Store는 상태 저장을 담당하며 React API 및 게시 작업을 통해 다시 호출할 수 있습니다.

물론 두 라이브러리는 일반적으로 직접 사용되지 않습니다. Provider 및 연결을 제공하는 React-redux라는 바인딩도 있습니다. . 많은 사람들은 실제로 redux가 여기에 갇혀 있다는 것을 이해합니다.

Provider는 최상위 앱의 배포 지점으로 사용할 수 있는 공통 구성 요소입니다. Store 속성만 필요합니다. 위치나 중첩된 수준 수에 관계없이 연결된 모든 구성 요소에 상태를 배포합니다.

connect는 실제 지점입니다. 즉, 먼저 두 개의 매개변수(데이터 바인딩 mapStateToProps 및 이벤트 바인딩 mapDispatchToProps)를 승인한 다음 하나의 매개변수(바인딩할 구성요소 자체)를 승인합니다.

mapStateToProps: Redux 시스템을 구축하면 자동으로 초기화되지만 React 컴포넌트는 그 존재를 모르기 때문에 필요한 Redux 상태를 정리해야 하므로 함수를 바인딩해야 하며, 그 매개변수는 상태는 단순히 관심 있는 몇 가지 값을 반환합니다.

mapDispatchToProps: 선언된 액션은 콜백 역할을 하며 이 함수를 통해 전달될 수도 있습니다. redux 보조 메소드인 binActionCreator를 통해 모든 액션과 디스패치 매개변수가 바인딩됩니다. as attribute는 단순히 컴포넌트에서 함수로 사용되며 수동 디스패치가 필요하지 않습니다. 이 mapDispatchToProps는 선택사항입니다. 이 매개변수를 전달하지 않으면 redux는 단순히 store.dispatch로 수동으로 사용할 수 있는 속성으로 디스패치를 ​​구성요소에 주입합니다.

이것이 치료가 필요한 이유이기도 합니다.

위 과정이 완료되면 Redux와 React가 작동할 준비가 됩니다.

간단히 말하면:

1. 최상위 배포 상태로 React 구성 요소를 수동적으로 렌더링할 수 있습니다.

2. 이벤트를 듣고, 이벤트는 상태에 영향을 미치기 위해 모든 상태의 최상위 수준으로 돌아갈 권리가 있습니다.

요약:

React에는 상태를 관리하는 관리자가 필요합니다. Redux는 최상위 상태를 배포하고 반응 구성 요소의 렌더링을 변경하는 역할을 합니다.

위 내용은 redux와 반응의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!