国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Flux 應(yīng)用架構(gòu)

Jonathan Shieber / 2841人閱讀

摘要:應(yīng)用架構(gòu)是用來構(gòu)建客戶端應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似的架構(gòu),但是它更加簡(jiǎn)單清晰,是一種單向數(shù)據(jù)流的架構(gòu)設(shè)計(jì)。將數(shù)據(jù)和動(dòng)作類型傳遞給去分發(fā)數(shù)據(jù)流是一個(gè)包含所有動(dòng)作類型的常量對(duì)象一個(gè)分發(fā)中心,它管理著應(yīng)用的所有數(shù)據(jù)流向。

Flux 應(yīng)用架構(gòu)

Flux是Facebook用來構(gòu)建客戶端Web應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似MVC的架構(gòu),但是它更加簡(jiǎn)單、清晰,是一種單向數(shù)據(jù)流的架構(gòu)設(shè)計(jì)。

Note

請(qǐng)事先對(duì)React和ES6進(jìn)行了解。

本文采用Facebook官方的Flux。

快速入門
$ git clone https://github.com/ipluser/react-flux-demo.git
$ cd react-flux-demo
$ npm start

瀏覽器將會(huì)自動(dòng)打開一個(gè)新的網(wǎng)頁(若沒有,請(qǐng)?jiān)L問http://127.0.0.1:8080):

核心概念

Flux應(yīng)用主要分為四個(gè)主要的部門:Views, Actions, Dispatcher, Stores.

Name Description
Views 視圖層,React組件
Actions 行為動(dòng)作層,視圖層觸發(fā)的動(dòng)作,例如click event
Dispatcher 分發(fā)中心,注冊(cè)/接受動(dòng)作,調(diào)用數(shù)據(jù)流向中的回調(diào)函數(shù)
Stores 數(shù)據(jù)層,管理應(yīng)用狀態(tài),廣播通知Views狀態(tài)發(fā)生改變

單向數(shù)據(jù)流是Flux應(yīng)用的核心。Dispatcher, Stores, Views是獨(dú)立的輸入和輸出節(jié)點(diǎn),而Action是一個(gè)包含數(shù)據(jù)和動(dòng)作類型的簡(jiǎn)單對(duì)象。

Views

打開項(xiàng)目入口文件main.jsx:

// public/scripts/main.jsx
import React from "react";
import ReactDOM from "react-dom";
import TodoController from "./components/todoController.jsx";

ReactDOM.render(, document.body);

上面代碼中采用了ReactJS Controller View模式,一個(gè)"Controller View"是應(yīng)用中最頂層的組件,它管理著所有應(yīng)用狀態(tài),并以屬性方式傳遞給子組件。 接下來我們看看toToController.jsx:

// public/scripts/components/todoController.jsx
import React from "react";

import TodoAction from "../actions/todoAction.js";
import TodoStore from "../stores/todoStore.js";
import Todo from "./todo.jsx";

export default class TodoController extends React.Component {
  constructor(props) {
    super(props);
  }

  newItem() {
    TodoAction.addItem("new item");
  }

  render() {
    return ;
  }
}

正如你所看到的,TodoController僅僅給Todo子組件指定了newItem動(dòng)作。Todo接收屬性和渲染組件:

// public/scripts/components/todo.jsx
import React from "react";

import "../../styles/components/todo.scss";

export default function Todo(props) {
  let list = props.items.map((item, index) => {
    return 
  • {item}
  • ; }); return (
      {list}
    ); }

    一旦點(diǎn)擊todo按鈕,TodoController將會(huì)觸發(fā)一個(gè)addItem動(dòng)作。

    Actions

    TodoAction將數(shù)據(jù)和動(dòng)作類型傳遞給Dispatcher去分發(fā)數(shù)據(jù)流:

    // public/scripts/actions/todoAction.js
    import AppDispatcher from "../dispatcher.js";
    import TodoConstant from "../constants/todoConstant.js";
    
    class TodoAction {
      addItem(text) {
        AppDispatcher.dispatch({
          actionType: TodoConstant.ADD_ITEM,
          text
        });
      }
    }
    
    export default new TodoAction();

    todoConstants.js是一個(gè)包含所有動(dòng)作類型的常量對(duì)象:

    // public/scripts/constants/todoConstant.js
    export default {
      ADD_ITEM: "TODO_ADD_ITEM"
    };
    Dispatcher

    Dispatcher一個(gè)分發(fā)中心,它管理著應(yīng)用的所有數(shù)據(jù)流向。每一個(gè)Store在這里注冊(cè),并提供一個(gè)回調(diào)函數(shù):

    // public/scripts/dispatcher.js
    import { Dispatcher } from "flux";
    
    import TodoStore from "./stores/todoStore";
    import TodoConstant from "./constants/todoConstant";
    
    const AppDispatcher = new Dispatcher();
    
    TodoStore.dispatchToken = AppDispatcher.register(payload => {
      switch (payload.actionType) {
        case TodoConstant.ADD_ITEM:
          TodoStore.addItem(payload.text);
          break;
        default:
      }
    });
    
    export default AppDispatcher;

    上面代碼中可以看到,當(dāng)TodoAction提供給Dispatcher一個(gè)新動(dòng)作時(shí),TodoStore將會(huì)通過注冊(cè)時(shí)的回調(diào)函數(shù)接受動(dòng)作的行為。

    Stores

    TodoStore包含狀態(tài)和業(yè)務(wù)邏輯。它的職責(zé)有點(diǎn)類似MVC中的model

    // public/scripts/stores/todoStore.js
    import EventEmitter from "events";
    
    class TodoStore extends EventEmitter {
      constructor() {
        super();
        this.items = [];
      }
    
      getAll() {
        return this.items;
      }
    
      addItem(text) {
        this.items.push(text);
        this.change();
      }
    
      change() {
        this.emit("change");
      }
    
      addListener(name, callback) {
        this.on(name, callback);
      }
    
      removeListener(name, callback) {
        this.removeListener(name, callback);
      }
    }
    
    export default new TodoStore();
    Views, again

    再回到TodoController中,我們初始化應(yīng)用的狀態(tài),同時(shí)監(jiān)聽Store的狀態(tài)改變事件:

    // public/scripts/components/todoController.jsx
    import React from "react";
    
    import TodoAction from "../actions/todoAction.js";
    import TodoStore from "../stores/todoStore.js";
    import Todo from "./todo.jsx";
    
    export default class TodoController extends React.Component {
      constructor(props) {
        super(props);
        this.state = { items: TodoStore.getAll() };
        this.onListChange = this.onListChange.bind(this);
      }
    
      componentDidMount() {
        TodoStore.addListener("change", this.onListChange);
      }
    
      componentWillUnmount() {
        TodoStore.removeListener("change", this.onListChange);
      }
    
      onListChange() {
        this.setState({
          items: TodoStore.getAll()
        });
      }
    
      newItem() {
        TodoAction.addItem("new item");
      }
    
      render() {
        return ;
      }
    }

    一旦TodoController接受到應(yīng)用狀態(tài)改變,將會(huì)觸發(fā)Todo重新渲染。

    參考

    Facebokk Flux

    Andrew - Controller-View

    ruanyifeng - Flux 架構(gòu)入門教程

    源代碼

    react-flux-demo

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79496.html

    相關(guān)文章

    • Redux概念之一: Redux簡(jiǎn)介

      摘要:應(yīng)用這說明并不是單指設(shè)計(jì)給用的,它是獨(dú)立的一個(gè)函數(shù)庫,可通用于各種應(yīng)用。在數(shù)據(jù)流的最后,要觸發(fā)最上層組件的,然后進(jìn)行整體的重新渲染工作。單純?cè)诘膶?duì)象上是沒有辦法使用,要靠額外的函數(shù)庫才能這樣作,這是一定要使用類似像這種函數(shù)庫的主要原因。 Redux的官網(wǎng)中用一句話來說明Redux是什么: Redux是針對(duì)JavaScript應(yīng)用的可預(yù)測(cè)狀態(tài)容器 這句話雖然簡(jiǎn)短,其實(shí)是有幾個(gè)涵義的: ...

      cjie 評(píng)論0 收藏0
    • 我對(duì) React Flux 架構(gòu)的理解

      摘要:當(dāng)響應(yīng)時(shí),通過已注冊(cè)的回調(diào)函數(shù),將提供的數(shù)據(jù)負(fù)載發(fā)送給應(yīng)用中的所有。對(duì)外只暴露,不允許提供禁止在任何地方直接操作。是單例作為中的事件分發(fā)中心,同時(shí)還要管理所有中的事件。 React Flux架構(gòu)簡(jiǎn)介 個(gè)人現(xiàn)階段對(duì)Flux架構(gòu)的理解,求拍磚求star!原文鏈接:https://github.com/kuitos/kuitos.github.io/issues/27 React 簡(jiǎn)介請(qǐng)戳 ...

      hankkin 評(píng)論0 收藏0
    • Flux 應(yīng)用架構(gòu)

      摘要:應(yīng)用架構(gòu)是用來構(gòu)建客戶端應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似的架構(gòu),但是它更加簡(jiǎn)單清晰,是一種單向數(shù)據(jù)流的架構(gòu)設(shè)計(jì)。將數(shù)據(jù)和動(dòng)作類型傳遞給去分發(fā)數(shù)據(jù)流是一個(gè)包含所有動(dòng)作類型的常量對(duì)象一個(gè)分發(fā)中心,它管理著應(yīng)用的所有數(shù)據(jù)流向。 Flux 應(yīng)用架構(gòu) Flux是Facebook用來構(gòu)建客戶端Web應(yīng)用的一種應(yīng)用架構(gòu)體系。它是一種類似MVC的架構(gòu),但是它更加簡(jiǎn)單、清晰,是一種單向數(shù)據(jù)流的架構(gòu)設(shè)...

      songjz 評(píng)論0 收藏0
    • Redux專題:考古

      摘要:光憑一個(gè)是無法實(shí)現(xiàn)血緣關(guān)系疏遠(yuǎn)的組件之間的狀態(tài)同步的。就是為解決這個(gè)問題而生的。,處理動(dòng)作的派發(fā),相當(dāng)于架構(gòu)的。我們的主角是,它也是目前社區(qū)最受歡迎的狀態(tài)管理框架。專題一覽考古實(shí)用中間件時(shí)間旅行 本文是『horseshoe·Redux專題』系列文章之一,后續(xù)會(huì)有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個(gè)人博客 獲得無與倫比的閱讀體驗(yàn) React的橫空出世給...

      toddmark 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <