此文已由作者張威授權網易雲社群發布。
現在我們有了乙個可執行且不依賴於框架的應用程式，react 已經準備投入使用。
檢視層由 presentational components 和 container components 組成。
接下來，我們來建立 articleformcontainer。react 或者 angular 都不重要，表單有些複雜。
檢視 ramda 庫以及如何增強我們**的宣告性質的方法。
表單接受使用者輸入並將其傳遞給 articleservice 處理。此服務根據該輸入建立乙個 article，並將其新增到 articlestore 中以供 interested 元件使用它。所有這些邏輯都儲存在 submitform 方法中。
『articleformcontainer.js』
// @flowimport react, from 'react';import * as r from 'ramda';import type from "../domain/articleservice";import type from "../store/articlestore";import from "../domain/articleservice";import from "../store/articlestore";import from "./articleformcomponent";這裡注意 articleformcontainer，presentational component，返回使用者看到的真實表單。該元件顯示容器傳遞的資料，並丟擲 changearticletitle、 changearticleauthor 和 submitform 的方法。type props = {};
type formfield =
export type formdata = ;
export class articleformcontainer extends component, articleauthor:
}; this.articlestore = articlestore; this.articleservice = articleservice;
} changearticletitle(event: event)
changearticleauthor(event: event)
submitform(event: event) ); if (newarticle) this.clearform();
} else
};clearform() );
} markinvalid(istitlevalid: boolean, isauthorvalid: boolean) );
} render()
changearticleauthor=
/>)}}
『articleformcomponent.js』
// @flow現在我們有了建立文章的表單，下面就陳列他們吧。articlelistcontainer 訂閱了 articlestore，獲取所有的文章並展示在 articlelistcomponent 中。import react from 'react';
import type from './articleformcontainer';
type props =
export const articleformcomponent = (props: props) => = props;
const onsubmit = (submithandler) => (event) => ;
return ()
};
『articlelistcontainer.js』
// @flowimport * as react from 'react'import type from "../domain/article";import type from "../store/articlestore";import from "../store/articlestore";import from "./articlelistcomponent";articlelistcomponent 是乙個 presentational component，他通過 props 接收文章，並展示元件 articlecontainer。type state =
type props = {};
export class articlelistcontainer extends react.component; this.subscriber = this.articlestore.subscribe((articles: article) => );
});} componentwillunmount()
render()
}
『articlelistcomponent.js』
// @flowimport react from 'react';import type from "../domain/article";import from "./articlecontainer";articlecontainer 傳遞文章資料到表現層的 articlecomponent，同時實現 likearticle 和 removearticle 這兩個方法。type props = export const articlelistcomponent = (props: props) => = props; return (
)};
likearticle 方法負責更新文章的收藏數，通過將現存的文章替換成更新後的副本。
removearticle 方法負責從 store 中刪除制定文章。
『articlecontainer.js』
// @flowimport react, from 'react';import type from "../domain/article";import type from "../domain/articleservice";import type from "../store/articlestore";import from "../domain/articleservice";import from "../store/articlestore";import from "./articlecomponent";articlecontainer 負責將文章的資料傳遞給負責展示的 articlecomponent，同時負責當 「收藏」或「刪除」按鈕被點選時在響應的**中通知 container component。type props = ;
export class articlecontainer extends component
likearticle(article: article)
removearticle(article: article)
render()
deletearticle=
/>)}}
還記得那個作者名要大寫的無厘頭需求嗎？
articlecomponent 在應用程式層呼叫 articleuiservice，將乙個狀態從其原始值（沒有大寫規律的字串）轉換成乙個所需的大寫字串。
『articlecomponent.js』
// @flowimport react from 'react';import type from "../domain/article";import * as articleuiservice from "../services/articleuiservice";免費體驗雲安全(易盾)內容安全、驗證碼等服務type props = export const articlecomponent = (props: props) => = props; return (
likearticle(article)}
>
like
deletearticle(article)}
>
delete
);};
更多網易技術、產品、運營經驗分享請點選。
關於makefile需要掌握的知識
關於makefile需要掌握的知識有 1.基本規則，2.makefile檔案裡的賦值方法，包括廷時變數和立即變數。3.常用函式，包括字元衝替換函式，分析函式和檔名函式等。makefile介紹 最簡單的makefile檔案如下。hello hello.c gcc o hello hello.c cle...
關於mybatis，需要掌握的基礎
目錄 總結 mybatis，需要掌握的基礎如下 1 了解orm 思想 orm思想的作用 對映配置的兩種方式 2 mybatis開發流程 基本使用 3 日誌框架 4 了解mybatis生命週期並抽取工具類mybatisutil mybatisutil工具類的作用 6 註解開發 7 動態sql 8 物件...
JS基礎，你需要掌握的要點！
迴圈控制語句 1 break 終止本層迴圈，繼續執行迴圈後面的語句 當迴圈有多層時，break只會跳過一層迴圈 對於for，continue執行後，繼續執行迴圈變數更新語句n 對於while，do while，continue執行後，繼續執行迴圈條件，判斷 所以使用這兩個迴圈時必須注意 contin...