為什么要學(xué)習(xí)redux-form？

我們知道，react-redux為React開發(fā)提供了科學(xué)的存儲管理方案。另一方面，類似Semantic-UI與Material UI，Ant-UI等則提供了比較全面的基于React組件框架的UI解決方案。但問題在于，后者提供的UI方案還有很大的局限性，特別是對于form表單的各種應(yīng)用需求支持方面。為此，相對于簡單的表單應(yīng)用，為了減少重復(fù)冗余的代碼，我們可以去使用redux-form-utils庫，此庫能利用高階組件的特性為表單的每個字段提供value和onChange等必須值，而無需你手動創(chuàng)建。但是，對于復(fù)雜的表單，redux-form-utils庫顯得捉襟見肘；此時，轉(zhuǎn)而利用redux-form即成為最佳方案。這是因為redux-form庫除了提供表單必須的字段支持外，redux-form還能實現(xiàn)表單同步驗證、異步驗證甚至嵌套表單等復(fù)雜功能。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)順昌免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Javascript靜態(tài)類型檢查工具Flow

為什么存在和要使用Flow？要回答這個問題必須提起微軟的TypeScript語言。一提起TypeScript，還不得不提起微軟的JScript。JScript是由微軟公司開發(fā)的活動腳本語言，是微軟對ECMAScript規(guī)范的實現(xiàn)。JScript最初是隨Internet Explorer 3.0于1996年8月發(fā)布。在網(wǎng)絡(luò)程序員談?wù)揑nternet Explorer中的JavaScript的時候，他們實際上是指JScript。和其他活動腳本一樣，它后來也被Windows Script Host（WSH）和Active Server Pages所支持。典型的JScript源文件使用的擴(kuò)展名是.js。JScript最新的版本是基于尚未定稿的ECMAScript4.0版規(guī)范的JScript .NET，并且可以在微軟的.Net環(huán)境下編譯。JScript在ECMA的規(guī)范上增加了許多特性。

TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言，它是JavaScript的一個超集，擴(kuò)展了JavaScript的語法?，F(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。TypeScript 可處理已有的 JavaScript 代碼，并只對其中的 TypeScript 代碼進(jìn)行編譯。

Flow是個JavaScript的靜態(tài)類型檢查工具，由Facebook出品的開源碼項目，問世只有一年多，是個相當(dāng)年輕的項目。簡單來說，它是對比TypeScript語言的解決方式。Flow本質(zhì)上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強(qiáng)制說你沒按照它的警告消息修正，就不會讓你運(yùn)行程序。當(dāng)然，并沒有要求什么時候一定要用這類的工具，只是這種作法可以讓你的代碼更具強(qiáng)健性與提高閱讀性，也可以直接避去很多不必要的數(shù)據(jù)類型使用上的問題，這種開發(fā)方式目前在許多框架與函數(shù)庫項目，或是以JavaScript應(yīng)用為主的開發(fā)團(tuán)隊中都已經(jīng)都是必用工具。

JavaScript是一種弱(動態(tài))數(shù)據(jù)類型的語言，弱(動態(tài))數(shù)據(jù)類型代表在代碼中，變量或常量會自動依照賦值變更數(shù)據(jù)類型，而且類型種類也很少，這是直譯式腳本語言的常見特性，但有可能是優(yōu)點(diǎn)也是很大的缺點(diǎn)。優(yōu)點(diǎn)是容易學(xué)習(xí)與使用，缺點(diǎn)是像開發(fā)者經(jīng)常會因為賦值或傳值的類型錯誤，造成不如預(yù)期的結(jié)果。有些時候在使用框架或函數(shù)庫時，如果沒有仔細(xì)看文件，亦或是文件寫得不清不楚，也容易造成誤用的情況。

這個缺點(diǎn)在應(yīng)用規(guī)模化時，會顯得更加嚴(yán)重。我們在開發(fā)團(tuán)隊的協(xié)同時，一般都是用詳盡的文字說明，來降低這個問題的發(fā)生，但JS語言本身無法有效阻止這些問題。而且說明文件也需要花時間額外編寫，其他的開發(fā)者閱讀也需要花時間。在現(xiàn)今預(yù)先編譯器流行的年代，像TypeScript這樣的強(qiáng)(靜態(tài))類的JavaScript超集語言就開始流行，用嚴(yán)格的角度，以JavaScript語言為基底，來重新打造另一套具有強(qiáng)(靜態(tài))類型特性的語言，就如同Java或C#這些語言一樣，這也是為什么TypeScript稱自己是企業(yè)級的開發(fā)JavaScript解決方案。

TypeScript自然有它的市場，但它有一些明顯的問題，首先是JavaScript開發(fā)者需要再進(jìn)一步學(xué)習(xí)，內(nèi)容不少，也有一定陡峭的學(xué)習(xí)曲線，不過這還算小事情。重大的事情是需要把已經(jīng)在使用的應(yīng)用代碼，都要整個改用TypeScript代碼語法，才能發(fā)揮完整的功用。這對很多已經(jīng)有內(nèi)部代碼庫的大型應(yīng)用開發(fā)團(tuán)隊而言，將會是個重大的決定，因為如果不往全面重構(gòu)的路走，將無法發(fā)揮強(qiáng)(靜態(tài))類型語言的最大效用。

所以許多現(xiàn)行的開源碼函數(shù)庫或框架，并不會直接使用TypeScript作為代碼的語言，另一方面當(dāng)然因為是TypeScript并非普及到一定程度的語言，社群上有熱愛的粉絲也有不是那么支持的反對者。當(dāng)然，TypeScript也有它的優(yōu)勢，自從TypeScript提出了DefinitelyTyped的解決方式之后，讓現(xiàn)有的函數(shù)庫能額外再定義出里面使用的類型，這也是另一個可以與現(xiàn)有框架與庫相整合的方案，這讓許多函數(shù)庫與框架都提交定義檔案，提供了另一種選擇。另一個優(yōu)勢是，TypeScript也是個活躍的開源碼項目，發(fā)展到現(xiàn)在也有一段時間，算是逐漸成熟的項目。它的背后有微軟公司的支持，在最近發(fā)布的知名的、全新打造過的Angular2框架中(由Google主導(dǎo))，也采用了TypeScript作為基礎(chǔ)的開發(fā)語言。

現(xiàn)在，F(xiàn)low提供了另一個新的選項，它是一種強(qiáng)(靜態(tài))類型的輔助檢查工具。Flow的功能是讓現(xiàn)有的JavaScript語法可以事先作類型的聲明(定義)，在開發(fā)過程中進(jìn)行自動檢查，當(dāng)然在最后編譯時，一樣可以用babel工具來移除這些標(biāo)記。

相較于TypeScript是另外重新制定一套語言，最后再經(jīng)過編譯為JavaScript代碼來運(yùn)行。Flow走的則是非強(qiáng)制與非侵入性的路線。Flow的優(yōu)點(diǎn)是易學(xué)易用，它的學(xué)習(xí)曲線沒有TypeScript來得高，雖然內(nèi)容也很多，但大概一天之內(nèi)學(xué)個大概，就可以漸進(jìn)式地開始使用。而且因為Flow從頭到尾只是個檢查工具，并不是新的程序語言或超集語言，所以它可以與各種現(xiàn)有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標(biāo)記就是回到原來的代碼，沒什么負(fù)擔(dān)。當(dāng)然，F(xiàn)low的功用可能無法像TypeScript這么全面性，也不可能改變要作某些事情的語法結(jié)構(gòu)。

redux-form支持基于Flow的靜態(tài)類型檢查

當(dāng)你從redux-form庫中使用import語句導(dǎo)入組件或者函數(shù)時Flow能夠自動導(dǎo)入相應(yīng)的類型。而且，你還可以把redux-form提供的所有props類型導(dǎo)入到你的組件中。

有關(guān)在JS項目下Flow的安裝，請參考文后的文檔，在此省略。如果你在配置文件.flowconfig中忽略node_modules文件夾的話，相應(yīng)的類型不會導(dǎo)入，而且你還會接收到錯誤提示，如下所示：

import { Field, reduxForm } from 'redux-form'
^^^^^^^^^^^^ redux-form. Required module not found
因此，在你的文件.flowconfig中，請確保整個文件夾不被忽略：
...
[ignore]
/node_modules/editions # you can still selectively ignore packages that cause flow errors
[include]
…

有關(guān)Props類型的簡單使用舉例

下面的幾個例子展示了如何基于Flow在redux-form項目中把相應(yīng)的類型支持注入到你的使用reduxForm()這個高階組件（HOC)封裝的表單組件中。

使用FormProps舉例

import type { FormProps } from 'redux-form'

type Props = {
  someCustomThing: string
} & FormProps
// ^^^^^^^^^^

class MyForm extends React.Component {
  props: Props

  render() {
    const { handleSubmit, someCustomThing } = this.props
    return 
// fields here
  }
}

使用FieldProps舉例

import type { FieldProps } from 'redux-form'

const renderField = ({ input, meta, ...rest } : FieldProps) =>
//                                           ^^^^^^^^^^^^^
  

    
    {meta.touched && meta.error && 
{meta.error}
}
  

...

使用FieldsProps

import type { FieldsProps } from 'redux-form'

const renderField = (fields : FieldsProps) =>
//                         ^^^^^^^^^^^^^^
  

    {fields.map(({ input, meta, ...rest }) =>
      

        
        {meta.touched && meta.error && 
{meta.error}
}
      
)
    }
  

...

使用FieldArrayProps舉例

import type { FieldArrayProps } from 'redux-form'

const renderFieldArray = ({ fields } : FieldArrayProps) =>
//                             ^^^^^^^^^^^^^^^^^^
  

    {fields.map((name, index, fields) => (
      

        
        
      
    ))}
  

...

小結(jié)

正如前面提及的，在小型JavaScript項目中，如果你有把握，可以省略使用Flow。盡管如此，但是事實證明，只要你選擇使用js開發(fā)，主動使用Flow將會為你帶來很多的驚喜——這遠(yuǎn)大于你學(xué)習(xí)Flow的時間投入。在基于React的redux-form子項目開發(fā)中，上述結(jié)論也不例外。

參考資料

1.https://segmentfault.com/a/1190000010088546
2.https://redux-form.com/7.4.2/docs/flow.md/
3.https://flow.org/en/docs/usage/
4.https://segmentfault.com/a/1190000008088489
5.https://segmentfault.com/a/1190000010205508