react hooks 表格实战

需求

antd表格

组件划分

Table

index.js

Pagination.js

Table.js

Hooks

useTableData.js

userPagination.js

###Pagination.js:用于展示分页组件，有如下参数

• page: 当前页面
• pageSize：每页展示条数
• total: 总数据量
• setPage : 设置页面和每页条数

import React from 'react'
import { Pagination } from 'antd'

export default props => {
  return (
    <Pagination
      showSizeChanger
      current={props.pagination.page}
      pageSize={props.pagination.pageSize}
      total={props.total}
      onChange={props.setPage}
    />
  )
}

Table.js:用于表格数据的展示，有如下参数

• data：表格数据

import React from 'react'
import { Table } from 'antd'

export default props => {
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '价格',
      dataIndex: 'price_range',
      key: 'price_range'
    }
  ]

  return (
    <Table
      dataSource={props.data.list}
      columns={columns}
      pagination={false}
      rowKey="id"
    />
  )
}

翻页Hooks(usePatination)

import { useState } from 'react'
export default () => {
  const [pagination, setPagination] = useState({
    page: 1,
    pageSize: 10
  })
  return {
    pagination,
    setPage(page = 1, pageSize = 10) {
      setPagination({
        page,
        pageSize
      })
    }
  }
}

获取数据Hooks(useTableData)

import { useState, useEffect } from 'react'

export default (fn, params, value) => {
  const [data, setData] = useState({
    total: 0,
    list: []
  })
  const [loading, setLoading] = useState(false)

  useEffect(
    () => {
      setLoading(true)
      fn({
        ...params,
        value
      }).then(res => {
        setData({
          total: res.data.total,
          list: res.data.list
        })
        setLoading(false)
      })
    },
    [params, value]
  )

  return {
    data,
    loading
  }
}

index.js:Table容器

import React, { useState } from 'react'
import { Spin, Input } from 'antd'
import Table from './table'
import Pagination from './Pagination'
import Api from '../api'
import usePagination from '../hooks/usePagination'
import useTableData from '../hooks/useTableData'
export default () => {
  const [value, setValue] = useState('')
  const { pagination, setPage } = usePagination()
  const { data, loading } = useTableData(Api.getList, pagination, value)
  return (
    <Spin spinning={loading}>
      <Input value={value} onChange={e => setValue(e.target.value)} />
      <Table data={data} />
      <Pagination
        pagination={pagination}
        setPage={setPage}
        total={data.total}
      />
    </Spin>
  )
}

但是这样子有一个问题，input在不断输入的时候，会有抖动现象

所以我们就实现一个防抖的hooks吧

import { useEffect, useRef } from 'react'

const useDebounce = (fn, ms = 30, deps = []) => {
  let timeout = useRef()
  useEffect(() => {
    if (timeout.current) clearTimeout(timeout.current)
    timeout.current = setTimeout(() => {
      fn()
    }, ms)
  }, deps)

  const cancel = () => {
    clearTimeout(timeout.current)
    timeout = null
  }

  return [cancel]
}

export default useDebounce

更改上面的Input框的onChage事件

onChange={e => setValue(e.target.value)}

onChange={e => useDebounce(setValue(e.target.value))}

Ok，完事了