Ice编写组件&样式方案&数据请求&状态管理《五》

<button type=“button” onClick={() => setUrlQuery({ count: undefined })}>

clear

urlQuery.count: {urlQuery?.count}

</>

);

};

通过类似 useUrlState 的封装，可以极大的减少我们的编码量。ahooks 主要提供了以下几类 Hooks：

• Table

• UI

• State

• SideEffect

• LifeCycle

• DOM

• Advanced

具体使用详见 ahooks。

样式方案：

====================================================================

全局样式#

对于整个项目的全局样式，统一定义在 src/global.[scss|less|scss] 文件中，框架会默认引入该文件：

// 引入默认全局样式

@import ‘@alifd/next/reset.scss’;

body {

-webkit-font-smoothing: antialiased;

}

局部样式#

对于页面级和组件级的样式，推荐使用 CSS Modules 的方案，这能很好的解决样式开发中的两个痛点问题：全局污染、命名错乱

也就是React原生也有的index.module.scss，然后局部使用className={styles.container}

---

如何全局覆盖基础组件（next/antd）样式？

暂未发现这个有啥影响

数据请求：

====================================================================

globalServices.tsx文件，项目demo：

import { request } from ‘ice’;

export default {

async getUserTree() {

return await request({

url: ‘url’,

method: ‘GET’,

})

},

async queryRoleMenuById(roleId: any) {

return await request(url${roleId})

}

}

官网推荐常用使用方式：

request(RequestConfig);

request.get(‘/user’, RequestConfig);

request.post(‘/user’, data, RequestConfig);

{

// url is the server URL that will be used for the request

url: ‘/user’,

// method is the request method to be used when making the request

method: ‘get’, // default

// headers are custom headers to be sent

headers: {‘X-Requested-With’: ‘XMLHttpRequest’},

// params are the URL parameters to be sent with the request

// Must be a plain object or a URLSearchParams object

params: {

ID: 12345

},

// data is the data to be sent as the request body

// Only applicable for request methods ‘PUT’, ‘POST’, and ‘PATCH’

data: {

firstName: ‘Fred’

},

// timeout specifies the number of milliseconds before the request times out.

// If the request takes longer than timeout, the request will be aborted.

timeout: 1000, // default is 0 (no timeout)

// withCredentials indicates whether or not cross-site Access-Control requests

// should be made using credentials

withCredentials: false, // default

// responseType indicates the type of data that the server will respond with

// options are: ‘arraybuffer’, ‘document’, ‘json’, ‘text’, ‘stream’

responseType: ‘json’, // default

// should be made return full response

withFullResponse: false,

// request instance name

instanceName: ‘request2’

}

useRequest#

用在函数式组件中，使用 useRequest 可以极大的简化对请求状态的管理。

-----------暂时不知道咋用滴，是ahooks里的东西，官网demo：

// 用法 1：传入字符串

const { data, error, loading } = useRequest(‘/api/repo’);

// 用法 2：传入配置对象

const { data, error, loading } = useRequest({

url: ‘/api/repo’,

method: ‘get’,

});

// 用法 3：传入 service 函数

const { data, error, loading, request } = useRequest((id) => ({

url: ‘/api/repo’,

method: ‘get’,

data: { id },

});

请求配置：

在实际项目中通常需要对请求进行全局统一的封装，例如配置请求的 baseURL、统一 header、拦截请求和响应等等，这时只需要在应用的的 appConfig 中进行配置即可。