Практика использования React Hooks в Ant Financial

компоненты

Компоненты — это повторное использование UI + логики, но возможность повторного использования логики равна 0.

HOC и Render Props

HOC и Render Props могут извлекать логику и повторно использовать ее, но это не делает повторное использование логики популярным.

<Mouse>
  (position)=> <OurComponent />
</Mouse>

<WindowSize>
  (size)=> (
        <Mouse>
        (position)=> <OurComponent size={size} mouse={position}/>
    </Mouse>
    )
</WindowSize> 

React Hooks очень хорошо решает проблему логического повторного использования, и в то же время в сообществе родился ряд хороших библиотек React Hooks.

import {useMouse, useWindowSize, useScroll} from 'react-use'

function Demo(){
  const mousePosition = useMouse();
  const windowSize = useWindowSize();
}

@umijs/hooks

useAntdTable

1. страница, управление размером страницы
2. Когда страница, pageSize изменяется, снова сделайте асинхронный запрос
3. При изменении условий фильтра сброс страницы и повторный запрос данных
4. Загрузка обработки асинхронных запросов
5. Обработка состояния гонки для асинхронных запросов
6. Отбрасывать текущие асинхронные запросы, когда компонент выгружается (многие люди обычно не обрабатывают это, а в некоторых случаях выдают предупреждение)

const { tableProps } = useAntdTable(asyncFn);
const columns = [];
return (
  <Table columns={columns} rowKey="id" {...tableProps} />
)

useSearch

1. Стабилизатор
2. Загрузка обработки асинхронных запросов
3. Контроль времени запроса для асинхронных запросов
4. Отменить логику, такую ​​как защита от сотрясения и асинхронные запросы, когда компонент выгружен.

const { data, loading, onChange } = useSearch(asyncFn);

<Select
  onSearch={onChange}
  loading={loading}
>
  {data.map((item)=><Option />)}
</Select>

Больше пользовательских хуков

Основные крючки

напиши в конце