component

Component is UI + logic reuse, but logic reuse is equal to 0.
A React project is made up of numerous components, large and small. In the React world, components are first-class citizens. The basis for breaking up components is to reuse as much code as possible.

Components are UI + logic reuse, you can’t separate UI and logic. Antd’s Cascader cascade selection component, for example, has built-in style and cascade selection logic, so users can use it as a black box. There is a real problem, however, when the style of the component does not meet our needs, we need to re-implement a component from 0, rewrite the UI + logic, even if the logic is exactly the same. The logical reuse capability of the component is equal to 0. I can think of the scary fact that most of the logic of the community’s equivalent components is reusable, just different in style, but logic sharing is not very popular in the community.

HOC and Render Props

HOC and Render Props could pull logic out and reuse it, but they didn’t make logic reuse popular.
React provides HOC and Render Props in two ways to handle logic reuse problems. For example, we can use the Render Props to listen to the mouse position. 

<Mouse>
  (position) = > <OurComponent />
</Mouse>Copy the code
The same logic includes listening for window size, listening for scroll position and so on. But we rarely use render props to encapsulate logic, much less to share logic with other projects. Why is that? If you think about multiple logic reuse, you can see how scary it is. 

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

Copy the code
Nested hell of code is something we can’t stand, and HOC has a similar problem, which may be a big reason why logic reuse doesn’t catch on.

React Hooks

React Hooks solve logic reuse problems well, and there are a number of good React Hooks libraries in the community.
React Hooks were a React bombshell this year, reverberating fiercely in the community. With Hooks making it easy to wrap logic with Custom Hooks, logic sharing has become a trend. In the example above, we can easily implement this with react-use. 

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

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

Copy the code
React-use is one of the best Hooks libraries in the community, which encapsulates a lot of common base logic and is essential for daily development. But is react-use enough? Apparently not. React-use Hooks are small in granularity, similar to a tool library.

In a Mid-platform product, there is a lot of scenario-specific logic that requires multiple Hooks to combine, or custom specific logic. Inside Ant, there are a lot of mid-platform applications, and developers have all sorts of good custom Hooks in their projects. We took that good logic and created @umijs/ Hooks as the Hooks library for the mid-platform scenario.

@umijs/hooks

@umiJS /hooks is a hooks library for Chinese application scenarios that encapsulates the logic of common Chinese scenarios and makes Chinese development super easy. @umiJS /hooks have been implemented in many ant Financial products, with good reputation and obvious improvement. Of course, you may not believe this, but you can use examples.

useAntdTable

In Taiwan development, the table page should be the most one, we generally use Antd table component to build, but there is still a lot of logic, we can not avoid.

  1. Page, pageSize management
  2. Page, pageSize changes when the asynchronous request
  3. When the filter criteria change, reset the page and re-request the data
  4. Loading of asynchronous requests
  5. Race handling of asynchronous requests
  6. Discards asynchronous requests in progress when a component is unloaded (many people do not normally process them, and in some cases will report warnings)
The above logic, which we must deal with on almost all table pages, is scary to think about. UseAntdTable encapsulates at least six of the preceding logics.
One line of code encapsulates all the logic, and list page development has never been easier. 

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

useSearch

For common asynchronous search scenarios, we typically deal with:

  1. Image stabilization
  2. Loading of asynchronous requests
  3. Request timing control for asynchronous requests
  4. Cancel logic such as anti-shake and asynchronous request during component uninstallation
Now it’s so simple: 

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

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

Copy the code

More Custom Hooks

Of course, we also have more Custom Hooks that are extremely useful, as you can imagine
Can asynchronous loadmore be implemented without writing a line of logic? (
useLoadMore)



Can you imagine a form that dynamically adds, deletes, and sorts without writing a line of logic?(
useDynamicList)


You don’t have to write logic for all kinds of common scenarios. You can be in
@umijs/hooks
Find more Hooks to use.

Basic Hooks

React-use is probably the best Hooks library in development, but we are gradually abandoning it, the biggest reason being that the version updates are too fast, can you imagine I had V9 on my project a few months ago and now I have V13? I don’t know how to upgrade anymore.

To solve this problem, @umijs/hooks also spawn basic hooks that are frequently used in everyday work, including the commonly used useAsync, useDebounce, useBoolean, useMouse, and so on, and are still evolving. Maybe umi hooks are all it takes.

Write in the last

Umi hooks have made it so easy that I can imagine a time soon when it will be possible to do Medium Dev without writing a line of logic, which is what we are fighting for.

At the same time, we hope that more people can get involved. You can provide good ideas, and you can also contribute to the daily package Hooks to enrich umi Hooks and benefit more people.

If you feel good, move your finger, click a star, encourage us, thank you!