Getting to know Ant-Design

Design Values

In terms of design, Ant-Design has two big values, natural and certain. Nature means going with the flow, and developing more natural products in line with the user's self-perception and behavior. Determining means exploring design laws and abstracting them into objects, reducing the designer's subjective interference and the uncertainty of the system. There is also modular design, which abstracts complex or identical parts into modules, ultimately reducing the complexity of the system and improving reliability and maintainability.

React Implementation of Ant-Design

https://ant.design/docs/react/practical-projects-cn
First post the address, there are still a lot of things to learn, today I made a Table component using Ant-Design, and learned about some common Table components usage.

Table component

dataSource: The data that needs to be passed to the table, the format is an array
Columns: Define which columns the table has. If it is static data, you only need to write key, title, and dataIndex attributes. If it is dynamic operation, there will also be a render attribute.
For loading
details, please refer to this link https://ant.design/components/table-cn/#components-table-demo-reset-filter

eight concepts of dva

I will briefly summarize what I have learned today. When making the above table, the ui aspect is the style made by Ant-Design, and I also learned some related usages of the Table component.

state: Represents the state data of the Model, usually represented as a JavaScript object. In dva, you can see the top state data through the instance attribute _store of dva, but it is rarely used.
Action: It is also a JavaScript object that represents the user's operation, including attributes such as type and payload.
dispatch function: the function that triggers the action, the action is the only way to change the state, here is generally called in the handleDelete function (processing the user's operation)
The Reducer function accepts two parameters: the result of the previous accumulated operation and the current value to be accumulated, and returns a new accumulated result. This function merges a collection into a single value.
Effect: Side effects, in applications, are called asynchronous operations. In order to control the operation of side effects, dva introduces redux-sagas at the bottom for asynchronous process control. Because of the concept of generator, it converts asynchronous to synchronous writing, thereby turning effects into pure functions.
Subscription: Subscription, used to subscribe to a data source, and then dispatch the required action according to the condition. The data source can be the current time, the server's websocket connection, keyboard input, geolocation changes, history routing changes, and so on.
Router: The routing here usually refers to front-end routing. Since our application is now a single-page application, we need front-end code to control the routing logic. Through the History API provided by the browser, we can monitor changes in browser urls to control routing. For related operations, the dva instance provides the router method to control routing, using react-router
```
import { Router, Route } from 'dva/router';
app.router(({history}) =>
  <Router history={history}>
<Route path="/" component={HomePage} />
  </Router>
);
```
Route Components: In dva, the components that usually need to connect Model are Route Components, which are organized in the /routes/ directory, and the /components/ directory is pure components (Presentational Components)
. For details, please refer to https://github.com /dvajs/dva/blob/master/docs/Concepts_en-US.md