React and Flux로 앱을 가져 오는 메모 작성

반응은 Facebook에 의해 사용자 인터페이스를 만들기에 아주 좋은 라이브러리입니다. 유일한 문제는 React가 응용 프로그램이 데이터를 처리하는 방법을 신경 쓰지 않는다는 것입니다. 대부분의 사람들은 MV*의 V로 반응을 사용합니다. 따라서 Facebook은 Flux라는 패턴을 도입하여 앱 내부의 데이터 처리에 대한 기능적 접근 방식을 제공했습니다. 이 튜토리얼은 플럭스 패턴에 대한 간단한 소개를 제공하고 React 및 Flux Architecture를 사용하여 앱을 취하는 메모를 만드는 방법을 보여줍니다. 키 테이크 아웃

flux는 Facebook에서 도입 된 패턴으로, 앱에서 데이터 처리에 대한 기능적 접근 방식을 제공하여 React의 사용자 인터페이스 생성을 보완합니다. 상점 및 작업과 같은 주요 구성 요소를 통해 단방향 데이터 흐름에 의존합니다. 튜토리얼은 React, Flux 및 Node.js를 사용하여 노트 테이킹 앱을 작성하는 예를 제공합니다. 이 앱은 Noteapp, Notelistbox, Notelist, Note, Notecreationbox 및 Textarea와 같은 다양한 구성 요소로 나뉩니다. 반응 및 환류는 서버에서 클라이언트와 서버 측의 구성 요소를 렌더링하는 데 사용됩니다. 이 기술은 서버에서 렌더링하고 단일 페이지 앱으로 작동하는 동형 앱을 생성 할 수 있습니다. 플럭스 아키텍처에서 응용 프로그램 상태는 상점에 저장됩니다. 조치가 발생하면 데이터를 디스패처로 보낸 다음이 데이터를 관련 저장소로 보냅니다. 이 매장은 상태를 업데이트하고 변경 이벤트를 방출하여 상점의 변경 사항을 듣고 스스로를 업데이트하고 재 렌더링 할 수 있습니다.

플럭스의 프라이머 플럭스는 단방향 데이터 흐름에 의존합니다. 플럭스 패턴에 두 가지 주요 구성 요소가 있습니다.

저장 : 이름에서 알 수 있듯이 상점 구성 요소는 응용 프로그램 데이터를 저장합니다.

행동 : 새로운 데이터는 작업을 통해 매장으로 흐릅니다. 상점은 작업을 듣고 작업이 호출 될 때 일부 작업 (예 : 데이터 수정)을 수행합니다 (예 : 데이터 수정). 이것은 데이터 흐름을 단방향으로 유지합니다.

개념을 강화하려면 실제 세계 예를 들어 봅시다. 예를 들어, 메모 제작 앱에서 다음 배열을 가질 수 있습니다.
메모 목록을 저장하는 Notestore라는 상점.
• CreateNote라는 조치를 취할 수 있습니다. 스토어 노 스토어는 액션 크리에이 테 노트를 듣고 조치가 호출 될 때마다 새로운 메모로 목록을 업데이트합니다. 데이터는 작업을 통해서만 매장으로 흐릅니다.
Notestore는 데이터가 변경 될 때마다 이벤트를 트리거합니다. NotelistComponent의 반응 구성 요소는이 이벤트를 듣고보기에 제시된 메모 목록을 업데이트합니다. 이것이 데이터가 상점에서 흐르는 방식입니다.
따라서 데이터 흐름은 다음과 같이 시각화 될 수 있습니다.
플럭스 패턴의 가장 큰 장점은 애플리케이션 데이터를 평평하게 유지한다는 것입니다. 돌연변이는 행동을 통해서만 수행 될 수 있으므로 데이터 변경이 전체 응용 프로그램에 어떤 영향을 미치는지 이해하는 것이 더 쉽습니다.
참고 : Facebook의 플럭스 가이드를 겪었다면 디스패처의 개념을 발견했을 것입니다. 디스패처는 상점에 콜백 레지스트리입니다. 조치가 호출되면 디스패처가 이에 응답하고 관련 데이터를 모든 등록 된 매장에 보냅니다. 그런 다음 스토어는 작업 유형을 확인하고 그에 따라 작업을 수행합니다.

위의 프로세스는 환류라는 라이브러리에 의해 크게 단순화되었습니다. 행동을들을 수있게하여 디스패처의 개념을 제거합니다. 따라서 환류점에서 상점은 직접 행동을 듣고 호출에 응답 할 수 있습니다.

플럭스 패턴을 완전히 이해하려면 환류, 반응 및 node.js. 개발 환경 설정 우리는 반응 및 환류를 사용하여 노드 모듈로 사용하고 Browserify를 사용하여 클라이언트 측에서도 사용할 수 있도록합니다. 그래서 우리가 환경을 설정하는 방법은 다음과 같습니다
우리는 Browserify를 사용하여 React 구성 요소, 작업 및 저장을 클라이언트 측 패키지에 묶을 것입니다. 우리는 Grunt Watch를 사용하여 위의 구성 요소의 변경 사항을 감지하고 변경이 발생할 때마다 Browserify를 다시 실행합니다.

Grunt Nodemon은 .jsx 또는 .js 파일이 변경 될 때마다 서버를 다시 시작하여 수동으로 수행 할 필요가 없습니다.

github에서 코드를 다운로드하고 gruntfile.js를 열어 작업에 대해 읽을 수 있습니다. 컴퓨터에 레포가 있으면 NPM 설치를 실행하여 필요한 노드 모듈을 설치할 수 있습니다. 다음 명령을 실행하고 개발을 시작하십시오

앱은 https : // localhost : 8000에서 액세스 할 수 있으며 다음과 같이 작동합니다.

앱에서 작업 앱의 다양한 구성 요소부터 시작하겠습니다. UI를 다양한 구성 요소로 나눌 수있는 방법은 다음과 같습니다.

1. 여기 각 구성 요소가하는 일이 있습니다
   <:> 공로 : 이것은 두 개의 자식 구성 요소 인 NoteListbox와 NoteCreationBox로 구성된 루트 구성 요소입니다. notelistbox : 단일 아동 구성 요소 노텔리스트가 있습니다. Flux Store에서 메모 목록을 검색하여 Notelist로 전달합니다. <:> NoteList : 각 노트 구성 요소를 렌더링하는 책임이 있습니다. 각 메모 구성 요소에 메모 객체를 전달합니다 참고 : 단일 노트 항목에 대한 세부 사항을 표시합니다. 이 경우 제목을 표시합니다. 당신은 쉽게 계속 진행하여 날짜, 자막 등과 같은 다른 세부 사항을 표시 할 수 있습니다.
   1. notecreationbox :이 구성 요소는 TextArea 구성 요소를 렌더링하고 현재 편집 된 메모 ID를 전달합니다.
   <:> textarea : 사용자 입력을 수락하기 위해 TextArea를 제공합니다. 저장을 위해 노트 텍스트를 NoteCreationBox에 전달합니다
   행동 생성 역류를 사용하여 일부 조치를 만듭니다. ACTION/NOTEACTIONS.JS를 열면 작업이 어떻게 생성되는지 확인할 수 있습니다. 스 니펫은 다음과 같습니다
   3. reblux.createactions는 동작을 만드는 데 사용됩니다. 우리는 이러한 조치를 구성 요소에서 사용하기 위해 수출합니다.
   4. 저장소 생성 우리는 노트 배열을 유지하는 Notestore라는 단일 상점이 있습니다. 다음 코드는 상점 (Stores/Notestore.js)을 만드는 데 사용됩니다.
   보시다시피, 우리는 Init Method 내부에서 CreateNote와 Editnote의 두 가지 행동을 듣습니다. 또한 작업이 호출 될 때 실행할 콜백을 등록합니다. 메모 추가/업데이트 코드는 매우 간단합니다. 또한 메모 목록을 검색하기 위해 Getters를 노출시킵니다. 마지막으로, 상점은 우리 구성 요소에서 사용할 수 있도록 수출됩니다.
   5. 구성 요소 생성
   모든 React 구성 요소는 React/Components 디렉토리에 있습니다. 나는 이미 UI의 전체 구조를 보여 주었다. 다운로드 된 소스 코드를 확인하여 각 구성 요소에 대한 자세한 내용을 알 수 있습니다. 여기서는 핵심 사항을 보여 드리겠습니다 (즉, 구성 요소가 동작을 호출하고 상점과 상호 작용하는 방법).
   6. Notelistbox : 이 구성 요소는 Notestore에서 메모 목록을 얻고 NoteList 구성 요소에 공급 한 다음 음표를 렌더링합니다. 구성 요소의 모습은 다음과 같습니다
   구성 요소가 장착되면 노 스토어의 변경 이벤트를 듣기 시작합니다. 이것은 노트 목록에 돌연변이가있을 때마다 방송됩니다. 우리의 구성 요소는이 이벤트를 듣고 변경의 경우 메모를 다시 렌더링 할 수 있도록합니다. 다음 줄은 리스너를 등록합니다
   따라서 구성 요소의 변경 방법이 호출 될 때마다. 이 메소드는 업데이트 된 메모 목록을 수신하고 상태를 변경합니다.
   this.state.state.State.State는 NoteList Re-Renders 자체를 변경할 때마다 Noteelist에게 소품으로 전달됩니다. 마지막으로, 우리는이 this.unsubscribe () ComponentWillUnmount 내부에 listener를 제거합니다.

   그래서, 이것은 Notelist가 Store의 Change 이벤트를 들으면서 항상 최신 상태를 유지하는 방식입니다. 이제 메모가 어떻게 생성/편집되는지 봅시다 notecreationbox : NoteCreationBox의 다음 방법을 살펴보십시오 :

   이 메소드는 저장 버튼을 클릭 할 때마다 호출됩니다. notetext를 첫 번째 매개 변수로 받아들입니다. ID가 두 번째 매개 변수로 전달되면 이것이 편집 작업임을 알 수 있으며 ACTION NOTEACTIONS.EDITNOTE ()를 호출합니다. 그렇지 않으면 새 메모에 대한 ID를 생성하고 호출 noteactions.createnote ()를 호출합니다. 우리의 노 스토어는 이러한 행동을 듣는 것을 기억하십시오. 작업에 따라 적절한 상점 콜백이 실행됩니다. 데이터가 돌연변이되면 상점은 변경 이벤트를 트리거하고 구성 요소 Notelist 자체를 업데이트합니다. 이것은 데이터가 시스템으로 흐르고 플럭스 기반 애플리케이션으로 나오는 방식입니다. 서버에서 반응을 사용하는 이유 왜 내가 서버에서 반응과 환류를 사용했는지 궁금 할 것입니다. React의 멋진 기능 중 하나는 클라이언트와 서버에서 구성 요소를 렌더링 할 수 있다는 것입니다. 이 기술을 사용하면 서버에서 렌더링하고 단일 페이지 앱으로 작동하는 동형 앱을 만들 수 있습니다. 메모 앱에는 필요하지 않을 수 있지만이 설정을 사용하여 향후 복잡한 동형 앱을 구축 할 수 있습니다. 개선의 여지가 많기 때문에 소스 코드를 살펴보고 더 개선하는 것이 좋습니다. 질문이 있으시면 의견으로 알려주세요.

   읽어 주셔서 감사합니다! React and Flux로 메모 작성 앱 생성에 대해 자주 묻는 질문

   React와 함께 노트 테이킹 앱을 만드는 데 플럭스의 역할은 무엇입니까?

   Flux는 Facebook이 React와 내부적으로 사용하는 설계 패턴입니다. 단방향 데이터 흐름을 사용하여 React의 Composable View 구성 요소를 보완합니다. 노트 테이킹 앱을 만드는 맥락에서 Flux는 데이터 흐름을 관리하는 데 중요한 역할을합니다. 데이터가 동작에서 상점, 뷰로 단일 방향으로 이동하도록합니다. 이로 인해 구성 요소 사이의 데이터 공유의 복잡성과 양방향 데이터 바인딩의 혼란을 피하기 때문에 앱을보다 예측 가능하고 이해하기 쉽습니다. ?

   반응 및 플럭스는 함께 작동하여 책임을 나누어 노트 테이킹 앱을 구축하기 위해 함께 작동합니다. React는 뷰를 렌더링하고 사용자 입력에 응답하는 반면 플럭스는 응용 프로그램의 데이터 흐름을 관리합니다. 사용자가 새 노트 추가와 같은 React 구성 요소와 상호 작용하면 작업을 유발합니다. 이 작업은 디스패처를 통해 상점 (앱의 중앙 데이터)을 업데이트합니다. 그런 다음 매장은 변경 이벤트를 방출하여 RECT 구성 요소가 필요한 경우 업데이트 및 재 렌더를 만듭니다. 플럭스 아키텍처의 주요 구성 요소는 무엇입니까?

   플럭스 아키텍처는 동작, 디스패처, 저장 및 뷰 (React 구성 요소)의 네 가지 주요 구성 요소로 구성됩니다. 조치는 응용 프로그램에서 디스패처로 데이터를 보내는 정보의 페이로드입니다. 디스패처는 애플리케이션의 모든 데이터 흐름을 관리하는 일종의 중앙 허브입니다. 상점에는 응용 프로그램 상태와 논리가 포함되어 있으며 디스패처에 의해 업데이트됩니다. 마지막으로, 뷰 (반응 구성 요소)가 상점의 변경 사항을 듣고 이러한 변경 사항이 발생할 때 스스로를 재 렌더링합니다.

   플럭스를 사용하여 메모 작성 앱의 상태를 어떻게 관리 할 수 ​​있습니까?

   플럭스에서 응용 프로그램 상태는 일반적으로 상점에 저장됩니다. 조치가 발생하면 (새 메모 추가와 같은) 데이터를 디스패처에 보냅니다. 그런 다음 디스패처는이 데이터를 관련 저장소로 보냅니다. 매장은 상태를 업데이트하고 변경 이벤트를 방출합니다. 매장의 변경 사항을 듣고있는 REACT 구성 요소는 응용 프로그램의 새로운 상태를 반영하여 스스로 업데이트하고 재 렌더링됩니다.
   플럭스는 노트 테이킹 앱의 확장 성을 유지하는 데 어떻게 도움이됩니까?

   REACT 및 FLUX로 구축 된 노트 테이킹 앱에서 사용자 상호 작용은 일반적으로 동작을 통해 처리됩니다. 사용자가 반응 구성 요소와 상호 작용하면 (새 메모를 추가하기 위해 버튼을 클릭하는 것과 같은) 작업이 트리거됩니다. 이 조치는 데이터를 파견자에게 보내어 관련 저장소를 업데이트합니다. 그런 다음 매장은 변경 이벤트를 방출하여 청취 반응 구성 요소를 업데이트하고 재 렌더링하게합니다.

   React and Flux로 구축 된 메모 작성 앱을 어떻게 테스트 할 수 있습니까? 메모를 테스트합니다. -React 및 Flux로 구축 된 앱은 다양한 테스트 라이브러리 및 프레임 워크를 사용하여 수행 할 수 있습니다. 단위 테스트의 경우 반응 구성 요소의 경우 Jest 또는 효소와 같은 라이브러리를 사용할 수 있습니다. 플럭스 동작 및 상점을 테스트하기 위해 Redux-Mock-Store 또는 Flux-Mock-Store와 같은 라이브러리와 함께 Jest를 사용할 수 있습니다. End-to-End Testing은 Cypress 또는 Puppeteer와 같은 도구를 사용하여 수행 할 수 있습니다.
   React and Flux로 구축 된 메모 작성 앱을 어떻게 디버깅 할 수 있습니까?
   메모 작성 앱을 디버깅 반응 및 플럭스는 다양한 도구를 사용하여 수행 할 수 있습니다. Chrome 및 Firefox 용 React Developer Tools Extension을 사용하면 React 구성 요소 계층, 소품 및 상태를 검사 할 수 있습니다. 플럭스 디버깅의 경우 콘솔에 동작 및 상태 변경을 기록하거나 Redux를 플럭스 구현으로 사용하는 경우 Redux DevTools와 같은 도구를 사용할 수 있습니다. 노트 테이킹 앱을 작성할 때 React and Flux와 함께 다른 라이브러리 또는 프레임 워크를 사용할 수 있습니까?

   예, 메모 작성 앱을 구축 할 때 React and Flux와 함께 다른 라이브러리 또는 프레임 워크를 사용할 수 있습니다. 예를 들어, Navigation 용 React Router와 같은 라우팅 라이브러리, 테스트를위한 JEST와 같은 테스트 라이브러리 또는 앱 스타일링을위한 재료 UI와 같은 UI 라이브러리를 사용할 수 있습니다. 라이브러리 또는 프레임 워크의 선택은 특정 요구 사항과 선호도에 따라 다릅니다.

   REACT 및 FLUX로 구축 된 메모 작성 앱의 성능을 최적화 할 수 있습니까?

   A의 성능을 최적화하십시오. React 및 Flux로 구축 된 노트 테이킹 앱에는 다양한 전략이 포함될 수 있습니다. 일반적인 전략 중 하나는 상태와 소품을 신중하게 관리하고 REACT의 순수 요소 또는 적절한 경우 꼭 봐야 할 끈적 끈적한 업무를 사용하여 구성 요소가 필요할 때만 다시 렌더링하도록하는 것입니다. 다른 전략에는 코드 분할을 통해 앱의 초기로드 시간을 최적화하거나 릴레이 또는 아폴로와 같은 라이브러리를 사용하여 데이터 가져 오기 최적화가 포함될 수 있습니다.

위 내용은 React and Flux로 앱을 가져 오는 메모 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!