推薦兩個好用的 React 庫以及使用後的感想

Formik

github地址

牆裂推薦

直接上例子吧

    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        let errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        /* and other goodies */
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
複製程式碼

上面可以看到 Formik 只負責提供表單操作相關的 props，並不直接去影響 UI，所以這樣的話使用者就可以自由的定義 UI 和互動該如何展現，而相關的表單操作可以直接使用 Formik 提供的 props 即可。

在表單驗證上個人推薦搭配 yup 食用更佳。

Downshift

github地址

這是一個製作 Select 相關的元件庫，同樣它也是提供給使用者下拉選擇或者搜尋選擇之類的 props，UI 由使用者自定義。

感悟

對於使用上述兩個庫後自己對元件的設計也多了些想法，一個優秀的前端庫不一定會具備最優秀 UI，但是一定具備讓使用者使用起來感覺舒服的 API，所以基於此我自己也設計了一個關於上傳的元件，目前在公司內部專案中進行了使用。

example

    <FileUpload
        upload={upload}
        files={files}
        accept={config.accept}
        multiple={!!config.multiple}
        onStatusChange={(files) => {
          const uploadedFiles = files.filter(file => file.status === FileUploadStatus.UPLOADED)
          const changeFiles = uploadedFiles.map(getValueFromFiles)
          if (config.multiple) {
            setFieldValue(changeFiles)
          } else {
            setFieldValue(changeFiles[0])
          }
        }}
      >
        {(fileRenderProps) => {
          return (
            <FilePreview
              fileRenderProps={fileRenderProps}
              multiple={!!config.multiple}
            />
          )
        }}
    </FileUpload>
複製程式碼

我提供了一個 FileUpload 元件，元件對其 children 提供了 fileRenderProps，裡面包含當前上傳的 files，拖拽相關的 dndProps，拖拽的狀態 dndStatus，還有就是上傳的 showOpenDialog。

interface IFileUploadRenderProps {
  readonly files: IUploadFileProps[]
  readonly dndProps: IDNDProps
  readonly dndStatus: IDNDStatus
  showOpenDialog(): void
  removeAllFile(): void
}
複製程式碼

以及上面還提供了一個比較通用的 FilePreview 元件用來展示上傳的檔案佇列，在 FileUpload 元件的 children 中我們可以自由定義上傳按鈕或者上傳的拖拽區域的互動和 UI。

最後放上幾張示例圖

結語

第一次寫文章，有不好的地方請包涵，哈哈哈。