리액트 플럭스가 뭐야?

React Flux는 React의 vuex와 유사한 공개 상태 관리 솔루션으로, 공개 상태를 관리하기 위해 단방향 데이터 흐름을 사용하는 Facebook에서 공식적으로 제공하는 애플리케이션 아키텍처입니다.

이 기사의 운영 환경: Windows7 시스템, React17.0.1, Dell G3.

리액트 플럭스란 무엇인가요?

Flux in React

flux는 React의 vuex와 유사한 공개 상태 관리 솔루션으로 Facebook에서 공식적으로 제공하는 애플리케이션 아키텍처이며 단방향 데이터 흐름을 사용하여 공개 상태를 관리합니다. 이제 더 이상 사용되지 않습니다. 하지만 Redux 솔루션을 더 잘 이해하려면 여전히 Flux 워크플로우에 익숙해져야 합니다~

cnpm i flux -S를 사용하여 설치하세요.

Flux 구성

• View: 뷰 레이어

• Action: 뷰에서 보낸 메시지

• Dispatcher: Action을 수신하고 콜백 함수를 실행하는 데 사용됨

• Store: 데이터 레이어 , 저장소 상태가 변경되면

flux

flux의 워크플로는 데이터를 업데이트할 때 다음 단계를 거칩니다.

• 사용자가 View 레이어와 상호 작용하고 Action

을 트리거합니다.

• Action은 Dispatch를 사용하여 Action의 자체 상태를 Dispatcher에 보냅니다.

• dispatcher는 Register를 통해 이벤트를 등록한 다음 Action에서 전달한 유형을 사용하여 업데이트를 위한 해당 Store 콜백을 트리거합니다

• The 해당 데이터는 Store Update에서 수행되며 뷰도 동기적으로 업데이트되도록 View 레이어 이벤트를 트리거합니다

• View 레이어는 신호를 받아 업데이트됩니다

코드 형식으로 자세히 확장합니다.

사용자는 View 레이어와 상호 작용하고 Action을 트리거합니다.

구성 요소에서:

<button onClick = {this.handler.bind(this)}>更新数据</button>

Action은 Dispatcher.dispatch를 사용하여 Action의 자체 상태를 Dispatcher

구성 요소로 보냅니다.

// 步骤1 事件的回调函数
handler(){
    // action是一个描述，定义一个独特的常量，用来描述你的数据更改的方式。
    let action = {
        type:"NUM_ADD"
    };
    dispatcher.dispatch(action)
}

dispatcher는 Dispatcher.register를 통해 이벤트를 등록합니다. 그런 다음 Action에서 전달한 유형을 사용하여 업데이트

Dispatcher 구성을 위한 해당 Store 콜백을 트리거합니다. 기능적으로 종속된 플럭스는 별도로 다운로드해야 합니다: cnpm i flux -S

dispatcher 파일에서:

import {Dispatcher} from 'flux'
import store from './index'
const dispatcher = new Dispatcher();
// register方法注册事件，通过action传入的类型来触发对应的 Store 回调进行更新
dispatcher.register((action)=>{
    switch(action.type){
        case "NUM_ADD": 
            /* 调用相应的store里定义好的方法 */
            store.handleAdd();
            break;
        case "Num_REDUCE":
            store.handleReduce()
            break;
    }
})
export default dispatcher;

Store, 해당 데이터가 업데이트되고 뷰 레이어 이벤트가 트리거되어 뷰도 동기적으로 업데이트됩니다

이벤트 구독 개체 캡슐화: 관찰자 이벤트 메커니즘 캡슐화

스토어 파일에서:

import observer from '../observer'
let store = Object.assign(observer,{
    state:{
        n:10
    },
    getState(){
        return this.state;
    },
    // store 中的action对应的处理方法，更新store的数据，并触发更新视图的方法
    handleAdd(){
        this.state.n ++;
        this.$emit("update")
    },
})
export default store;

뷰 레이어가 신호를 수신하고 업데이트합니다.

생성자에서 $on을 사용하여 이벤트를 구독하고 상태 업데이트에 대한 메서드를 콜백으로 정의합니다.

컴포넌트에서:

// ...
// 在这里进行事件订阅，以让视图得到更新
constructor(){
    super();
    this.state = store.getState();
    store.$on("update",this.handleUpdate.bind(this))
}
// ...
// 事件订阅的回调，更新视图方法
handleUpdate(){
    this.setState(store.getState());
}

그렇습니다. 4단계에서 트리거된 메서드가 여기에서 실행되고 데이터가 업데이트됩니다. Flux 시스템에서 데이터를 업데이트하는 전체 프로세스가 완료되었습니다.

플럭스의 단점

• 잦은 스토어 도입

• UI 컴포넌트와 컨테이너 컴포넌트의 분할이 너무 복잡함

• 여러 스토어 관리 불가

• 각 뷰 업데이트 필요 컴포넌트 모두 업데이트 기능과 바인딩되어야 합니다

... ...

따라서 작업에 Flux를 사용하는 것은 더 이상 권장되지 않습니다. 대신 상대적으로 더 완벽한 솔루션인 Redux가 있습니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 리액트 플럭스가 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!